/* Devis travaux · Essonne : un devis lisible, blanc froid, encre bleu nuit, ocre en touche. */
@font-face{font-family:"Schibsted Grotesk";src:url("/assets/fonts/schibsted-grotesk.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/assets/fonts/source-serif-4.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --surface:oklch(98.4% .004 265);
  --surface-sunk:oklch(95.6% .01 265);
  --ink:oklch(26% .06 265);
  --ink-soft:oklch(40% .04 265);
  --ink-muted:oklch(47% .03 265);
  --line:oklch(88.5% .014 265);
  --line-strong:oklch(26% .06 265);
  --accent:oklch(58% .13 70);
  --on-ink:oklch(97% .006 265);
  --on-ink-soft:oklch(84% .02 265);
  --font-display:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-text:"Source Serif 4",Georgia,"Times New Roman",serif;
  --space-2xs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--space-4xl:96px;
  --gutter:clamp(16px,4vw,40px);
  --wrap:1180px;
  --radius:6px;
  --ease-out:cubic-bezier(.22,1,.36,1);
}

/* Mode sombre : mêmes rôles, valeurs recalculées (jamais une inversion brute). */
@media (prefers-color-scheme:dark){
  :root{
    --surface:oklch(19% .02 265);
    --surface-sunk:oklch(16.5% .018 265);
    --ink:oklch(94% .01 265);
    --ink-soft:oklch(82% .015 265);
    --ink-muted:oklch(72% .015 265);
    --line:oklch(31% .02 265);
    --line-strong:oklch(86% .012 265);
    --accent:oklch(78% .12 75);
    --on-ink:oklch(19% .02 265);
    --on-ink-soft:oklch(34% .02 265);
    color-scheme:dark;
  }
  .hero-figure img{filter:contrast(1.04) brightness(.92)}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--ink);font:400 1.125rem/1.7 var(--font-text);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--font-display);font-weight:750;letter-spacing:-.022em;line-height:1.08;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0}
.wrap{width:min(100% - 2 * var(--gutter),var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--space-md);top:var(--space-md);z-index:10;background:var(--surface);padding:var(--space-xs) var(--space-sm)}

/* En-tête */
.site-header{border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);min-height:72px}
.brand{display:inline-flex;align-items:center;gap:var(--space-sm);font:700 1.15rem/1 var(--font-display);letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand-mark{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2}
.brand-zone{font:500 .8rem/1 var(--font-display);letter-spacing:.02em;color:var(--ink-muted);padding-left:var(--space-sm);border-left:1px solid var(--line)}
.site-nav{display:flex;align-items:center;gap:var(--space-lg);font:500 .95rem/1 var(--font-display)}
.site-nav a{text-decoration:none;color:var(--ink-soft)}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ink)}
.site-nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:.45em}
.site-nav .nav-cta{color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius);padding:10px 14px;transition:background-color .2s var(--ease-out),color .2s var(--ease-out)}
.nav-cta-short{display:none}
.site-nav .nav-cta:hover{background:var(--ink);color:var(--on-ink)}

/* Accueil */
.hero{padding-block:clamp(40px,7vw,96px) clamp(48px,7vw,88px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,6vw,88px);align-items:end}
.hero-owner{font:500 .95rem/1.4 var(--font-display);color:var(--ink-muted);margin-bottom:var(--space-lg)}
.hero h1{font-size:clamp(2.6rem,1.5rem + 4.2vw,5rem);font-weight:780;letter-spacing:-.035em;line-height:1.02;max-width:13ch}
.lead{font-size:clamp(1.15rem,1.05rem + .45vw,1.35rem);line-height:1.55;color:var(--ink-soft);max-width:46ch}
.hero .lead{margin-top:var(--space-lg)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-md) var(--space-xl);margin-top:var(--space-xl)}
.button,.cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border-radius:var(--radius);font:600 1rem/1.2 var(--font-display);text-decoration:none;transition:transform .2s var(--ease-out),background-color .2s var(--ease-out)}
.button{background:var(--ink);color:var(--on-ink)}
.button:hover{color:var(--on-ink);background:color-mix(in oklch,var(--ink) 86%,var(--surface))}
.button:active,.cta:active{transform:translateY(1px)}
.text-link{font:600 1rem/1.2 var(--font-display);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.3em}
.hero-figure{margin:0}
.hero-figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:4px;filter:contrast(1.04)}
.hero-figure figcaption{margin-top:var(--space-xs);font:400 .8rem/1.4 var(--font-display);color:var(--ink-muted)}

.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-xs) var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid var(--line-strong)}
.section-head h2{font-size:clamp(1.6rem,1.3rem + 1.2vw,2.25rem)}
.section-head p{font:500 .9rem/1.4 var(--font-display);color:var(--ink-muted)}
.guides{padding-bottom:clamp(64px,8vw,112px)}
.guide-list{list-style:none}
.guide-list li{border-bottom:1px solid var(--line)}
.guide-list a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 32px;gap:var(--space-sm) clamp(24px,4vw,56px);align-items:start;padding-block:var(--space-xl);text-decoration:none}
.guide-list a:hover{color:inherit}
.guide-list h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);line-height:1.15;transition:color .2s var(--ease-out)}
.guide-list a:hover h3{color:var(--accent)}
.guide-summary p:first-child{font-size:1.05rem;line-height:1.55;color:var(--ink-soft)}
.guide-meta{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-md);margin-top:var(--space-sm);font:500 .875rem/1.4 var(--font-display);color:var(--ink-muted)}
.guide-arrow{font:500 1.4rem/1 var(--font-display);justify-self:end;transition:transform .25s var(--ease-out)}
.guide-list a:hover .guide-arrow{transform:translateX(4px);color:var(--accent)}

.method{padding-bottom:clamp(64px,8vw,112px)}
.method h2{font-size:clamp(1.35rem,1.2rem + .6vw,1.7rem);margin-bottom:var(--space-lg)}
.method-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-lg) clamp(24px,4vw,48px)}
.method-list li{border-top:1px solid var(--line-strong);padding-top:var(--space-md);font-size:1.02rem;line-height:1.6;color:var(--ink-soft)}
.method-list strong{display:block;margin-bottom:var(--space-2xs);font:650 1.02rem/1.3 var(--font-display);color:var(--ink)}

/* Bandeau d'appel */
.cta-band{background:var(--ink);color:var(--on-ink);padding-block:clamp(56px,7vw,96px)}
.cta-inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--space-xl) clamp(32px,6vw,88px);align-items:end}
.cta-band h2{font-size:clamp(1.9rem,1.3rem + 2.4vw,3.2rem);letter-spacing:-.03em;max-width:16ch}
.cta-copy .mention{font:500 1rem/1.5 var(--font-display);color:var(--on-ink-soft);max-width:38ch}
.cta{margin-top:var(--space-lg);background:var(--on-ink);color:var(--ink)}
.cta:hover{color:var(--ink);background:color-mix(in oklch,var(--on-ink) 88%,var(--ink))}

/* Guide */
.guide-head{padding-top:clamp(28px,4vw,48px)}
.crumbs{display:flex;flex-wrap:wrap;gap:var(--space-xs);font:500 .9rem/1.4 var(--font-display);color:var(--ink-muted);margin-bottom:clamp(24px,4vw,40px)}
.crumbs a{color:var(--ink-soft)}
.crumb-current{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40ch}
.guide-head h1{font-size:clamp(2.1rem,1.4rem + 2.8vw,3.6rem);letter-spacing:-.03em;max-width:21ch}
.guide-head .lead{margin-top:var(--space-lg);max-width:62ch}
.cartouche{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(32px,4vw,48px) 0 0;border:1px solid var(--line-strong);border-radius:4px;max-width:880px}
.cartouche div{padding:var(--space-sm) var(--space-md)}
.cartouche div+div{border-left:1px solid var(--line)}
.cartouche dt{font:500 .8rem/1.3 var(--font-display);color:var(--ink-muted)}
.cartouche dd{margin:var(--space-2xs) 0 0;font:600 1rem/1.3 var(--font-display)}
.guide-body{display:grid;grid-template-columns:230px minmax(0,68ch);gap:clamp(32px,6vw,96px);padding-block:clamp(40px,6vw,72px) clamp(64px,8vw,112px)}
.toc{position:sticky;top:var(--space-lg);align-self:start;font-family:var(--font-display)}
.toc-title{font:650 .9rem/1.3 var(--font-display);padding-bottom:var(--space-sm);border-bottom:1px solid var(--line-strong)}
.toc ul{list-style:none}
.toc li{border-bottom:1px solid var(--line)}
.toc li a{display:block;padding:var(--space-sm) 0;font-size:.92rem;line-height:1.35;color:var(--ink-soft);text-decoration:none}
.toc li a:hover{color:var(--ink)}
.toc-cta{display:inline-block;margin-top:var(--space-lg);font:600 .92rem/1.3 var(--font-display);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.3em}
.prose>section+section{margin-top:clamp(40px,5vw,56px)}
.prose h2{font-size:clamp(1.45rem,1.2rem + 1vw,1.95rem);margin-bottom:var(--space-md);scroll-margin-top:var(--space-lg)}
.prose section[id]{scroll-margin-top:var(--space-lg)}
.prose p+p,.prose p+ul,.prose ul+p{margin-top:1em}
.prose ul:not(.next-links){padding-left:1.2em}
.prose ul:not(.next-links) li{padding-left:.2em}
.prose ul:not(.next-links) li+li{margin-top:.4em}
.prose ul:not(.next-links) li::marker{color:var(--accent)}
.prose a{text-decoration-color:var(--accent)}
.faq{border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-md);padding:var(--space-md) 0;cursor:pointer;list-style:none;font:600 1.05rem/1.4 var(--font-display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:400 1.5rem/1 var(--font-display);color:var(--accent);transition:transform .25s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>p,.faq details>ul{padding-bottom:var(--space-md);color:var(--ink-soft)}
.next-links{list-style:none;border-top:1px solid var(--line-strong)}
.next-links li{border-bottom:1px solid var(--line)}
.next-links a{display:flex;justify-content:space-between;gap:var(--space-md);padding:var(--space-md) 0;font:550 1.02rem/1.4 var(--font-display);text-decoration:none}
.sources ol{padding-left:1.4em;font-size:1rem}
.sources li+li{margin-top:var(--space-sm)}
.sources li span{display:block;font:400 .85rem/1.4 var(--font-display);color:var(--ink-muted)}

/* Pages simples */
.page{padding-block:clamp(40px,7vw,96px) clamp(64px,8vw,112px)}
.page h1{font-size:clamp(2.1rem,1.4rem + 2.8vw,3.4rem);letter-spacing:-.03em;max-width:18ch;margin-bottom:clamp(24px,4vw,40px)}
.page-prose{max-width:66ch}
.page-prose h2{font-size:1.3rem;margin:var(--space-2xl) 0 var(--space-sm)}
.page-prose .lead{margin-bottom:var(--space-lg)}
.page-prose .mention{margin-top:var(--space-2xl);font:500 .95rem/1.5 var(--font-display);color:var(--ink-muted)}

/* Pied de page */
.site-footer{border-top:1px solid var(--line);background:var(--surface-sunk);font:400 .95rem/1.6 var(--font-display);color:var(--ink-soft)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.2fr);gap:var(--space-xl) clamp(24px,5vw,64px);padding-block:var(--space-3xl) var(--space-2xl)}
.footer-brand{font:700 1.1rem/1.2 var(--font-display);color:var(--ink);margin-bottom:var(--space-sm);display:flex;align-items:center;gap:var(--space-sm)}
.footer-title{font:650 .85rem/1.3 var(--font-display);color:var(--ink);margin-bottom:var(--space-sm)}
.site-footer ul{list-style:none}
.site-footer li+li{margin-top:var(--space-2xs)}
.site-footer a{color:var(--ink-soft)}
.site-footer a:hover{color:var(--accent)}
.site-footer .mention{margin-bottom:var(--space-xs)}
.footer-base{border-top:1px solid var(--line);padding-block:var(--space-md) var(--space-lg);font-size:.85rem;color:var(--ink-muted)}
.link-button{padding:0;border:0;background:none;font:inherit;color:var(--ink-soft);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.link-button:hover{color:var(--accent)}

/* Consentement : refuser et accepter ont exactement le même poids (CNIL). */
.consent{position:fixed;left:var(--space-md);right:var(--space-md);bottom:var(--space-md);z-index:20;max-width:440px;padding:var(--space-lg);background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;box-shadow:0 18px 40px -24px color-mix(in oklch,var(--ink) 45%,transparent);font:400 .95rem/1.5 var(--font-display)}
.consent[hidden]{display:none}
.consent strong{color:var(--ink)}
.consent-actions{display:flex;gap:var(--space-sm);margin-top:var(--space-md)}
.consent-actions button{flex:1;min-height:44px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:600 .95rem/1 var(--font-display);cursor:pointer;transition:background-color .2s var(--ease-out),color .2s var(--ease-out)}
.consent-actions button:hover{background:var(--ink);color:var(--on-ink)}

@media (max-width:959px){
  .hero-grid{grid-template-columns:1fr}
  .hero-figure{order:-1}
  .hero-figure img{aspect-ratio:16/10;object-position:50% 25%}
  .guide-list a{grid-template-columns:minmax(0,1fr) 24px}
  .guide-summary{grid-column:1/-1;grid-row:2}
  .guide-arrow{grid-column:2;grid-row:1}
  .cta-inner{grid-template-columns:1fr}
  .guide-body{grid-template-columns:1fr}
  .toc{position:static;border:1px solid var(--line);border-radius:4px;padding:var(--space-md)}
  .toc-cta{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-about{grid-column:1/-1}
}
@media (max-width:640px){
  body{font-size:1.0625rem}
  .header-inner{min-height:64px;gap:var(--space-sm)}
  .brand-zone,.nav-cta-long,.nav-secondary,.crumb-current,.crumbs span[aria-hidden]{display:none}
  .brand{font-size:1.05rem;white-space:nowrap}
  .site-nav a{white-space:nowrap}
  .site-nav{gap:var(--space-md)}
  .site-nav .nav-cta{padding:8px 12px}
  .nav-cta-short{display:inline}
  .cartouche{grid-template-columns:1fr 1fr}
  .cartouche div:nth-child(3){border-left:0}
  .cartouche div:nth-child(n+3){border-top:1px solid var(--line)}
  .footer-grid{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important}
}

/* Paragraphes et renvois des guides, dans les rôles typographiques existants. */
.lead p + p{margin-top:var(--space-md)}
.updated{display:block;color:var(--ink-muted);font-size:.8em}
.prose .source-note{font-family:var(--font-display);font-size:.8em;color:var(--ink-muted)}