/* architecte-morbihan.fr
   Matières du Morbihan : ardoise des toits, chaux des façades, estran,
   ocre des voiles tannées du Golfe. Lettrage condensé façon immatriculation de coque. */

@font-face{font-family:"Archivo";src:url(/fonts/archivo-wdth.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Literata";src:url(/fonts/literata.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url(/fonts/literata-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}

:root{
  --ardoise:#1c2830;
  --ardoise-2:#24343d;
  --ardoise-3:#2f424c;
  --chaux:#f1f1ec;
  --blanc:#fbfbf8;
  --granit:#566064;
  --estran:#d4cfc3;
  --estran-2:#e6e3da;
  --tanne:#9a4527;
  --tanne-clair:#d09466;
  --brume:#9fb0b6;
  --f-display:"Archivo","Arial Narrow",Arial,sans-serif;
  --f-text:"Literata",Georgia,"Times New Roman",serif;
  --gutter:clamp(16px,4vw,48px);
  --maxw:1680px;
  --step--1:clamp(.84rem,.82rem + .1vw,.9rem);
  --step-0:clamp(1.0625rem,1.02rem + .2vw,1.15rem);
  --step-1:clamp(1.25rem,1.17rem + .4vw,1.45rem);
  --step-2:clamp(1.55rem,1.38rem + .8vw,2rem);
  --step-3:clamp(2.1rem,1.7rem + 2vw,3.3rem);
  --step-4:clamp(2.6rem,1.9rem + 3.6vw,5rem);
  --radius:2px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--chaux);color:var(--ardoise);font-family:var(--f-text);font-size:var(--step-0);line-height:1.65;font-optical-sizing:auto;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-color:var(--tanne)}
:focus-visible{outline:2px solid var(--tanne-clair);outline-offset:3px}
h1,h2,h3{font-family:var(--f-display);font-stretch:72%;font-weight:760;line-height:.98;letter-spacing:-.005em;margin:0 0 .5em;text-wrap:balance}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);font-stretch:82%;font-weight:680;line-height:1.1}
p{margin:0 0 1em}
ul,ol{padding-left:1.2em}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--blanc);color:var(--ardoise);padding:10px 14px;font-family:var(--f-display)}
.skip:focus{top:12px}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* Boutons et liens */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.7em 1.3em;border-radius:var(--radius);font-family:var(--f-display);font-stretch:92%;font-weight:620;font-size:1rem;letter-spacing:.01em;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.btn-primary{background:var(--tanne);color:var(--blanc)}
.btn-primary:hover{background:#82381f}
.btn-ghost{border-color:currentColor;color:inherit;background:transparent}
.hero .btn-ghost{background:var(--ardoise)}
.hero .btn-ghost:hover{background:var(--ardoise-2)}
.btn-ghost:hover{background:rgba(241,241,236,.08)}
.btn-small{min-height:40px;padding:.45em 1em;font-size:.95rem}
.link{font-family:var(--f-display);font-stretch:92%;font-weight:600;text-decoration:underline;text-decoration-color:var(--tanne);text-decoration-thickness:2px;text-underline-offset:.3em}
.link:hover{color:var(--tanne)}

/* En-tête */
.site-header{position:relative;z-index:20;background:var(--ardoise);color:var(--chaux)}
.home .site-header{position:absolute;inset:0 0 auto;background:transparent}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;line-height:1}
.brand-logo{width:auto;height:44px;flex:none}
.brand-text{display:flex;flex-direction:column;padding-left:14px;border-left:1px solid var(--ardoise-3)}
@media (min-width:960px){.brand-logo{height:50px}}
@media (max-width:420px){.brand{gap:10px}.brand-text{padding-left:10px}.brand-name{font-size:1.3rem}.brand-sub{font-size:.72rem}.brand-logo{height:38px}}
.brand-name{font-family:var(--f-display);font-stretch:68%;font-weight:800;font-size:1.55rem;letter-spacing:.005em}
.brand-sub{font-family:var(--f-display);font-stretch:90%;font-size:.78rem;color:var(--brume);margin-top:4px}
.nav-toggle{display:inline-flex;align-items:center;gap:10px;background:none;border:1px solid rgba(241,241,236,.35);color:inherit;min-height:44px;padding:0 14px;border-radius:var(--radius);font-family:var(--f-display);font-weight:600;font-size:.95rem;cursor:pointer}
.nav-toggle-bars{width:18px;height:12px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}
.nav-toggle-bars::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid currentColor}
.site-nav{display:none}
.site-nav.is-open{display:block;position:absolute;left:0;right:0;top:100%;background:var(--ardoise);padding:8px var(--gutter) 24px;border-top:1px solid var(--ardoise-3)}
.site-nav ul{list-style:none;margin:0;padding:0}
.site-nav li a{display:block;padding:12px 0;font-family:var(--f-display);font-stretch:88%;font-weight:560;font-size:1.1rem;text-decoration:none;border-bottom:1px solid var(--ardoise-3)}
.site-nav li a[aria-current="page"]{color:var(--tanne-clair)}
.site-nav .nav-contact a{border:0;margin-top:16px;display:inline-flex;background:var(--tanne);color:var(--blanc)}
.nav-phone{display:inline-block;margin-top:14px;font-family:var(--f-display);font-weight:600;color:var(--brume);text-decoration:none}
@media (min-width:1240px){
  .nav-toggle{display:none}
  .site-nav,.site-nav.is-open{display:flex;align-items:center;gap:28px;position:static;padding:0;background:none;border:0}
  .site-nav ul{display:flex;align-items:center;gap:26px}
  .site-nav li a{padding:6px 0;border:0;font-size:.98rem;text-decoration:none;white-space:nowrap}
  .site-nav li a:hover{text-decoration:underline;text-decoration-color:var(--tanne-clair);text-underline-offset:.4em}
  .site-nav .nav-contact a{margin:0;padding:.45em 1em}
  .site-nav .nav-contact a:hover{text-decoration:none;background:#82381f}
  .nav-phone{margin:0;color:var(--chaux);font-stretch:85%;font-size:1.02rem;letter-spacing:.02em}
}

/* Hero d'accueil */
.hero{position:relative;overflow:hidden;background:var(--ardoise);color:var(--chaux);padding-top:104px;isolation:isolate}
.hero-map{position:absolute;z-index:-1;width:240vw;max-width:none;left:-58.4vw;top:calc(250px - 27.6vw);height:auto;pointer-events:none}
@media (min-width:960px){.hero-map{width:130vw;left:-14.6vw;top:auto;bottom:calc(90px - 35.4vw)}.hero-map path{stroke-width:.62;opacity:.36}}
.hero-map path{fill:none;stroke:var(--tanne-clair);stroke-width:1.05;stroke-linejoin:round;opacity:.28;stroke-dasharray:1;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .hero-map path{stroke-dashoffset:1;animation:trace 4.6s cubic-bezier(.45,.05,.2,1) forwards;animation-delay:calc(.15s + var(--i) * 28ms)}
  .hero-map path:first-child{animation-duration:6.5s}
}
@keyframes trace{to{stroke-dashoffset:0}}
.hero-grid{display:grid;gap:40px;align-items:end;padding-bottom:36px}
.hero-kicker{font-family:var(--f-display);font-stretch:90%;font-weight:520;font-size:1rem;color:var(--brume);margin-bottom:18px}
.hero h1{font-size:clamp(3.1rem,1.2rem + 9.2vw,8.2rem);font-stretch:64%;font-weight:820;line-height:.86;letter-spacing:-.012em;margin:0 0 28px}
.hero h1 .l1,.hero h1 .l2{display:block}
.hero-lead{max-width:36em;font-size:var(--step-0);color:#dfe3e0;margin-bottom:30px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-media{margin:0;position:relative}
.hero-frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ardoise-2);border-radius:var(--radius)}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;display:block}
.hero-slide.is-active{opacity:1;z-index:1}
.hero-slide picture,.hero-slide img{width:100%;height:100%}
.hero-slide img{object-fit:cover;transform:scale(1.04);transition:transform 8s linear}
.hero-slide.is-active img{transform:scale(1)}
@media (prefers-reduced-motion:reduce){.hero-slide,.hero-slide img{transition:none;transform:none}}
.hero-caption{background:var(--ardoise);display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:14px;font-family:var(--f-display);font-stretch:88%}
.hero-caption-text a{font-weight:620;text-decoration:none;font-size:1.02rem}
.hero-caption-text a:hover{text-decoration:underline;text-decoration-color:var(--tanne-clair)}
.hero-caption-status{display:block;color:var(--brume);font-size:.88rem;margin-top:2px}
.hero-controls{display:flex;align-items:center;gap:6px;flex:none}
.hero-count{font-variant-numeric:tabular-nums;color:var(--brume);font-size:.92rem;margin-right:8px}
.hero-count b{color:var(--chaux);font-weight:620}
.hero-btn{width:44px;height:44px;display:grid;place-items:center;background:none;border:1px solid rgba(241,241,236,.3);border-radius:50%;color:var(--chaux);cursor:pointer}
.hero-btn:hover{border-color:var(--tanne-clair)}
.hero-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero-proof{list-style:none;margin:0;padding:22px 0 30px;background:linear-gradient(to bottom,rgba(28,40,48,.0),var(--ardoise) 40%);display:grid;gap:10px;border-top:1px solid var(--ardoise-3);font-family:var(--f-display);font-stretch:90%;font-size:.98rem;color:var(--brume)}
.hero-proof strong{color:var(--chaux);font-weight:620;margin-right:.4em}
.hero-proof a{color:inherit;text-decoration:underline;text-decoration-color:var(--tanne-clair);text-underline-offset:.2em}
.hero-proof a:hover{text-decoration-thickness:2px}
@media (min-width:700px){.hero-proof{grid-template-columns:repeat(3,auto);justify-content:start;column-gap:48px}}
@media (min-width:960px){
  .hero{padding-top:128px;min-height:min(100svh,1040px);display:flex;flex-direction:column;justify-content:flex-end}
  .hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,5vw,88px);padding-bottom:44px}
  .hero-text{padding-bottom:58px}
  .hero-frame{aspect-ratio:4/5;max-height:72svh;margin-left:auto}
}

/* Sections */
.section{padding-block:clamp(64px,9vw,136px)}
.section-head{max-width:760px;margin-bottom:clamp(32px,4vw,56px)}
.intro{font-size:var(--step-1);line-height:1.5;color:var(--granit);max-width:38em}
.split{display:grid;gap:36px}
@media (min-width:960px){
  .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,6vw,110px)}
  .split-head{position:sticky;top:32px;align-self:start}
}

/* Missions */
.mission-list{list-style:none;margin:0;padding:0;counter-reset:none}
.mission-list li{padding:26px 0 24px;border-top:1px solid var(--estran)}
.mission-list li:last-child{border-bottom:1px solid var(--estran)}
.mission-list h3{font-size:clamp(1.6rem,1.3rem + 1.2vw,2.3rem);font-stretch:68%;font-weight:780;margin-bottom:.3em}
.mission-list p{max-width:40em;margin-bottom:.6em}
.rule{font-family:var(--f-display);font-stretch:92%;font-size:var(--step--1);color:var(--granit);padding-left:12px;border-left:2px solid var(--tanne);margin:10px 0 0}

/* Réalisations */
.works{background:var(--blanc)}
.works-grid{display:grid;gap:18px}
.work{position:relative}
.work-link{display:block;position:relative;overflow:hidden;color:var(--chaux);text-decoration:none;background:var(--ardoise);border-radius:var(--radius);height:100%}
.work-img,.work-img img{width:100%;height:100%}
.work-img img{object-fit:cover;aspect-ratio:4/5;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.work-link:hover .work-img img{transform:scale(1.025)}
.work-link::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,30,36,.88) 0%,rgba(20,30,36,.35) 38%,rgba(20,30,36,0) 62%);pointer-events:none}
.work-body{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:22px 22px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.work-title{font-family:var(--f-display);font-stretch:68%;font-weight:780;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);line-height:1}
.work-short{font-size:.98rem;line-height:1.45;color:#dfe3e0;max-width:30em}
.work-link:hover .work-title{text-decoration:underline;text-decoration-color:var(--tanne-clair);text-decoration-thickness:2px;text-underline-offset:.15em}
.works-more{margin-top:30px}
@media (min-width:760px){
  .works-grid{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(0,auto)}
  .work-1{grid-column:1/8;grid-row:span 2}
  .work-2{grid-column:8/13}
  .work-3{grid-column:8/13}
  .work-4{grid-column:1/5}
  .work-5{grid-column:5/9}
  .work-6{grid-column:9/13}
  .work-1 .work-img{position:absolute;inset:0}
  .work-1 .work-img img{aspect-ratio:auto;height:100%}
  .work-1 .work-link{min-height:560px}
  .work-2 .work-img img,.work-3 .work-img img{aspect-ratio:5/4}
  .work-4 .work-img img,.work-5 .work-img img,.work-6 .work-img img{aspect-ratio:4/5}
}

.badge{display:inline-block;font-family:var(--f-display);font-stretch:92%;font-weight:620;font-size:.82rem;line-height:1;padding:7px 10px 6px;border-radius:var(--radius);background:rgba(241,241,236,.14);color:inherit;backdrop-filter:blur(2px)}
.badge-live{background:var(--tanne);color:var(--blanc);padding-left:22px;position:relative}
.badge-live::before{content:"";position:absolute;left:9px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--blanc)}
@media (prefers-reduced-motion:no-preference){.badge-live::before{animation:pulse 2.4s ease-in-out infinite}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* Chantier en cours */
.live{background:var(--ardoise);color:var(--chaux)}
.live .intro{color:var(--brume)}
.live-strip{list-style:none;margin:0 0 28px;padding:0 var(--gutter) 18px;scroll-padding-inline:var(--gutter);display:grid;grid-auto-flow:column;grid-auto-columns:min(72vw,340px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-color:var(--ardoise-3) transparent}
@media (min-width:1680px){.live-strip{padding-left:calc((100vw - var(--maxw)) / 2 + var(--gutter));scroll-padding-inline-start:calc((100vw - var(--maxw)) / 2 + var(--gutter))}}
.live-strip li{scroll-snap-align:start}
.live-strip img{aspect-ratio:3/4;object-fit:cover;width:100%;border-radius:var(--radius)}
.live-strip p{font-size:.95rem;line-height:1.45;color:#cfd6d4;margin:12px 0 0}
.live-strip b{display:block;font-family:var(--f-display);font-stretch:85%;font-weight:640;color:var(--tanne-clair);margin-bottom:2px}
.live .link{color:var(--chaux)}

/* Morbihan */
.morbihan-grid{display:grid;gap:40px;align-items:center}
.rules-dl{margin:0 0 28px}
.rules-dl div{padding:16px 0;border-top:1px solid var(--estran)}
.rules-dl dt{font-family:var(--f-display);font-stretch:80%;font-weight:720;font-size:1.25rem}
.rules-dl dd{margin:4px 0 0;color:var(--granit)}
.morbihan-map{margin:0;background:var(--ardoise-2);border-radius:var(--radius);padding:clamp(16px,3vw,36px)}
.morbihan-map img{width:100%}
@media (min-width:960px){.morbihan-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(48px,6vw,96px)}}
.recent{margin-top:clamp(48px,6vw,80px)}
.recent h3{font-size:var(--step-2);font-stretch:72%}
.recent ul{list-style:none;margin:0;padding:0}
.recent li{display:grid;gap:4px 24px;padding:16px 0;border-top:1px solid var(--estran)}
.recent-kind{font-family:var(--f-display);font-stretch:85%;font-weight:640}
.recent-status{font-family:var(--f-display);font-stretch:90%;font-size:.9rem;color:var(--tanne)}
@media (min-width:760px){.recent li{grid-template-columns:220px 1fr 110px;align-items:baseline}.recent-status{text-align:right}}

/* Méthode */
.method{background:var(--estran-2)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:step}
.steps li{counter-increment:step;padding:26px 0 20px;border-top:1px solid var(--estran);position:relative}
.steps li::before{content:counter(step);display:block;font-family:var(--f-display);font-stretch:62%;font-weight:800;font-size:3.4rem;line-height:.9;color:var(--tanne);margin-bottom:10px;font-variant-numeric:tabular-nums}
.steps h3{font-size:1.45rem;font-stretch:76%}
.steps p{color:var(--granit);margin:0;max-width:30em}
@media (min-width:760px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}}
@media (min-width:1100px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* FAQ */
.faq details{border-top:1px solid var(--estran)}
.faq details:last-child{border-bottom:1px solid var(--estran)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;font-family:var(--f-display);font-stretch:84%;font-weight:640;font-size:1.22rem;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;margin-top:-9px;border-right:2px solid var(--tanne);border-bottom:2px solid var(--tanne);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq-a{padding:0 0 22px;max-width:44em}
.refs{font-family:var(--f-display);font-stretch:94%;font-size:var(--step--1);color:var(--granit);line-height:1.5}
.refs a{color:var(--granit)}

/* Bandeau contact */
.cta-band{background:var(--ardoise-2);color:var(--chaux);padding-block:clamp(56px,7vw,100px)}
.cta-inner{display:grid;gap:28px;align-items:end}
.cta-band h2{font-size:var(--step-4);font-stretch:64%;font-weight:820;line-height:.9;margin-bottom:.3em}
.cta-band p{color:#cfd6d4;max-width:34em}
.cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.cta-phone{font-family:var(--f-display);font-stretch:70%;font-weight:760;font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem);line-height:1;text-decoration:none;letter-spacing:.01em}
.cta-phone:hover{color:var(--tanne-clair)}
@media (min-width:960px){.cta-inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.cta-actions{justify-content:flex-end}}

/* Pied de page */
.site-footer{background:var(--ardoise);color:#cfd6d4;padding:64px 0 96px;font-size:.98rem}
.footer-grid{display:grid;gap:36px}
.footer-brand{display:flex;align-items:center;gap:18px;font-family:var(--f-display);font-stretch:66%;font-weight:800;font-size:2rem;color:var(--chaux);line-height:1;margin-bottom:18px}
.footer-logo{width:auto;height:72px;flex:none}
.footer-cities{margin-top:44px}
.footer-cities::before{content:"";display:block;border-top:1px solid var(--ardoise-3);margin-bottom:28px}
.footer-cities ul{list-style:none;margin:0 0 14px;padding:0;columns:2;column-gap:24px}
.footer-cities li{padding:4px 0;break-inside:avoid}
.footer-cities a{text-decoration:none}
.footer-cities a:hover,.footer-cities a[aria-current]{text-decoration:underline;text-decoration-color:var(--tanne-clair)}
.footer-all{font-family:var(--f-display);font-weight:600;color:var(--chaux)}
@media (min-width:600px){.footer-cities ul{columns:3}}
@media (min-width:960px){.footer-cities ul{columns:5}}
.footer-h{font-family:var(--f-display);font-stretch:90%;font-weight:640;color:var(--chaux);margin-bottom:10px}
.footer-nav ul{list-style:none;padding:0;margin:0}
.footer-nav li{padding:5px 0}
.footer-nav a{text-decoration:none}
.footer-nav a:hover{text-decoration:underline;text-decoration-color:var(--tanne-clair)}
.footer-gbp{list-style:none;margin:-.4em 0 1em;padding:0}
.footer-gbp li{padding:2px 0}
.gbp-links{list-style:none;padding:0;margin:0 0 1em;display:grid;gap:10px}
.footer-phone{font-family:var(--f-display);font-weight:640;font-size:1.15rem;color:var(--chaux);text-decoration:none}
.footer-bottom{margin-top:40px;font-size:.88rem;color:var(--brume)}
.footer-bottom p{padding-top:20px;border-top:1px solid var(--ardoise-3);margin:0}
@media (min-width:760px){.footer-grid{grid-template-columns:2fr 1fr 1.4fr}.site-footer{padding-bottom:56px}}

/* Barre mobile */
.mobile-bar{position:fixed;z-index:30;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1.6fr;background:var(--ardoise);border-top:1px solid var(--ardoise-3);padding:8px 10px calc(8px + env(safe-area-inset-bottom));gap:8px}
.mobile-bar a{display:flex;align-items:center;justify-content:center;min-height:46px;font-family:var(--f-display);font-weight:640;font-size:1rem;text-decoration:none;color:var(--chaux);border:1px solid var(--ardoise-3);border-radius:var(--radius)}
.mobile-bar .mobile-bar-main{background:var(--tanne);border-color:var(--tanne)}
@media (min-width:760px){.mobile-bar{display:none}}

/* Pages intérieures */
.page-hero{background:var(--ardoise);color:var(--chaux);padding:clamp(40px,6vw,88px) 0 clamp(48px,6vw,84px)}
.page-hero h1{font-size:var(--step-4);font-stretch:64%;font-weight:820;line-height:.9;max-width:16ch;margin-bottom:.35em}
.page-hero .lead{font-size:var(--step-1);line-height:1.5;color:#dfe3e0;max-width:38em}
.page-hero-tall{padding-block:clamp(80px,12vw,180px)}
.page-meta{font-family:var(--f-display);font-stretch:92%;font-size:.95rem;color:var(--brume);margin-top:18px}
.crumbs{font-family:var(--f-display);font-stretch:92%;font-size:.92rem;color:var(--brume);margin-bottom:22px}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.prose-grid{display:grid;gap:40px}
.prose-grid>*{min-width:0}
.prose{max-width:46em}
.prose h2{font-size:var(--step-2);font-stretch:72%;margin-top:1.8em}
.prose section:first-child h2,.prose>h2:first-child{margin-top:0}
.prose .answer{font-size:var(--step-1);line-height:1.5;padding:4px 0 4px 18px;border-left:3px solid var(--tanne)}
.prose ul{padding-left:1.1em}
.prose li{margin-bottom:.5em}
.rules{list-style:none;padding:0!important}
.rules li{padding:14px 0;border-top:1px solid var(--estran);margin:0}
.art{display:inline-block;font-family:var(--f-display);font-stretch:92%;font-size:.84rem;color:var(--tanne);margin-left:4px;white-space:nowrap}
.table-wrap{overflow-x:auto;margin:1.4em 0}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.98rem}
caption{text-align:left;font-family:var(--f-display);font-stretch:90%;font-weight:600;padding-bottom:10px;color:var(--granit)}
th,td{text-align:left;vertical-align:top;padding:12px 14px 12px 0;border-top:1px solid var(--estran)}
thead th{font-family:var(--f-display);font-stretch:88%;font-weight:640;border-top:0;border-bottom:2px solid var(--ardoise)}
tbody th{font-family:var(--f-display);font-stretch:90%;font-weight:620}
.sources{margin-top:3em;padding-top:1.4em;border-top:2px solid var(--ardoise)}
.sources h2{font-size:var(--step-1)!important;font-stretch:84%!important;margin-top:0!important}
.meta{font-family:var(--f-display);font-stretch:92%;font-size:.92rem;color:var(--granit)}
.sources-list{list-style:none;padding:0!important;font-family:var(--f-display);font-stretch:94%;font-size:.95rem;line-height:1.45}
.sources-list li{padding:7px 0;border-top:1px solid var(--estran-2);margin:0!important}

/* Projet */
.project-hero{padding-bottom:clamp(40px,5vw,72px)}
.project-hero-grid{display:grid;gap:28px 36px;align-items:start;grid-template-areas:"text" "media" "facts"}
.project-hero-text{grid-area:text}.project-hero-media{grid-area:media}.project-hero-facts{grid-area:facts}
.project-hero h1{margin-top:16px}
.facts{margin:0;display:grid;gap:0}
@media (min-width:960px){.project-hero-facts{margin-top:28px}}
.facts div{display:grid;gap:2px 20px;padding:12px 0;border-top:1px solid var(--ardoise-3)}
.facts dt{font-family:var(--f-display);font-stretch:90%;font-weight:600;color:var(--brume);font-size:.92rem}
.facts dd{margin:0;color:#e4e7e4}
.project-hero-media{margin:0}
.project-hero-media img{border-radius:var(--radius);width:100%;max-height:82svh;object-fit:cover}
.project-hero-media figcaption{font-size:.92rem;color:var(--brume);margin-top:12px;line-height:1.45}
@media (min-width:600px){.facts div{grid-template-columns:150px 1fr}}
@media (min-width:960px){.project-hero-grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr);grid-template-areas:"text media" "facts media";grid-template-rows:auto 1fr;gap:0 clamp(40px,5vw,80px)}}
.project-intro .prose p:first-child{font-size:var(--step-1);line-height:1.55}
.project-section:nth-of-type(even){background:var(--blanc)}
.compare-section{background:var(--blanc)}
.compare{display:grid;gap:20px}
.compare figure{margin:0}
.compare img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.compare figcaption{font-size:.95rem;color:var(--granit);margin-top:10px;line-height:1.45}
.compare figcaption b{font-family:var(--f-display);font-stretch:80%;font-weight:760;color:var(--tanne);font-size:1.15rem;margin-right:6px}
@media (min-width:700px){.compare{grid-template-columns:1fr 1fr;gap:28px}}
.gallery{list-style:none;margin:0;padding:0;columns:1;column-gap:20px}
.gallery li{break-inside:avoid;margin-bottom:24px}
.gallery figure{margin:0}
.gallery img{width:100%;border-radius:var(--radius)}
.gallery figcaption{font-size:.92rem;color:var(--granit);line-height:1.45;margin-top:9px}
@media (min-width:600px){.gallery{columns:2}}
@media (min-width:960px){.gallery{columns:3;column-gap:24px}}
.zoom{display:block;cursor:zoom-in}
.timeline{list-style:none;margin:0;padding:0;counter-reset:ph}
.timeline>li{counter-increment:ph;padding:36px 0 12px;border-top:1px solid var(--estran)}
.timeline-head{max-width:44em;margin-bottom:24px}
.timeline-head h3{font-size:var(--step-2);font-stretch:70%}
.timeline-head h3::before{content:counter(ph);font-stretch:62%;color:var(--tanne);margin-right:.35em}
.timeline-head p{color:var(--granit)}
.next-project{padding-block:56px}
.next-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.next-card{display:block;text-decoration:none}
.next-card img{aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius);width:100%}
.next-label{display:block;font-family:var(--f-display);font-stretch:92%;font-size:.88rem;color:var(--granit);margin-top:12px}
.next-title{display:block;font-family:var(--f-display);font-stretch:72%;font-weight:760;font-size:clamp(1.2rem,1rem + 1vw,1.7rem);line-height:1.05}
.next-card:hover .next-title{text-decoration:underline;text-decoration-color:var(--tanne)}

/* Index des projets */
.project-index{list-style:none;margin:0;padding:0;display:grid;gap:56px}
.pi-link{display:grid;gap:22px;text-decoration:none;align-items:center}
.pi-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.pi-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.pi-body .badge{background:var(--estran-2);color:var(--ardoise)}
.pi-body .badge-live{background:var(--tanne);color:var(--blanc)}
.pi-title{font-family:var(--f-display);font-stretch:66%;font-weight:800;font-size:var(--step-3);line-height:.95}
.pi-type{font-family:var(--f-display);font-stretch:92%;color:var(--tanne);font-weight:600}
.pi-short{color:var(--granit);max-width:32em}
.pi-link:hover .pi-title{text-decoration:underline;text-decoration-color:var(--tanne);text-decoration-thickness:2px}
@media (min-width:860px){
  .pi-link{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px}
  .project-index li:nth-child(even) .pi-link{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .project-index li:nth-child(even) .pi-img{order:2}
}

/* À propos */
.about-hero{display:grid;gap:32px;align-items:end}
.about-portrait img{width:min(260px,60vw);border-radius:var(--radius);filter:saturate(.9)}
@media (min-width:860px){.about-hero{grid-template-columns:1fr auto}}

/* Contact */
.contact-grid{display:grid;gap:48px}
@media (min-width:960px){.contact-grid{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:72px}}
.form fieldset{border:0;padding:0;margin:0 0 28px}
.form legend{font-family:var(--f-display);font-stretch:74%;font-weight:760;font-size:var(--step-2);margin-bottom:14px;padding:0}
.field{margin-bottom:18px;display:flex;flex-direction:column}
.field-row{display:grid;gap:0 20px}
@media (min-width:640px){.field-row{grid-template-columns:1fr 1fr}}
.field label{font-family:var(--f-display);font-stretch:92%;font-weight:600;font-size:.98rem;margin-bottom:6px}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;color:var(--ardoise);background:var(--blanc);border:1.5px solid #b9b3a5;border-radius:var(--radius);padding:12px 14px;min-height:48px;width:100%}
.field textarea{resize:vertical;min-height:170px;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--tanne);outline-offset:1px;border-color:var(--tanne)}
.hint{font-family:var(--f-display);font-stretch:94%;font-size:.92rem;color:var(--granit);line-height:1.5;margin-top:8px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-error{background:#f6e3da;border-left:3px solid var(--tanne);padding:14px 16px;font-family:var(--f-display)}
.contact-aside h2{font-size:var(--step-1);font-stretch:80%;margin:28px 0 8px}
.contact-aside h2:first-child{margin-top:0}
.contact-phone{font-family:var(--f-display);font-stretch:70%;font-weight:780;font-size:2.4rem;text-decoration:none;line-height:1}
.contact-aside ul{padding-left:1.1em;color:var(--granit)}

/* Visionneuse */
.lightbox{border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:rgba(18,26,31,.96);color:var(--chaux)}
.lightbox::backdrop{background:rgba(18,26,31,.96)}
.lightbox-inner{height:100%;display:grid;grid-template-rows:1fr auto;padding:56px 16px 16px}
.lightbox img{max-width:100%;max-height:100%;margin:auto;object-fit:contain;align-self:center;justify-self:center}
.lightbox p{max-width:60em;margin:14px auto 0;text-align:center;font-size:.98rem;color:#cfd6d4}
.lightbox-close{position:absolute;top:10px;right:12px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(241,241,236,.35);background:none;color:inherit;font-size:1.6rem;line-height:1;cursor:pointer}
.lightbox-nav{position:absolute;top:50%;width:48px;height:48px;margin-top:-24px;border-radius:50%;border:1px solid rgba(241,241,236,.3);background:rgba(28,40,48,.6);color:inherit;cursor:pointer;font-size:1.3rem}
.lightbox-prev{left:12px}.lightbox-next{right:12px}

@media print{.site-header,.mobile-bar,.cta-band,.hero-map{display:none}body{background:#fff}}

/* Sommaire des guides */
@media (min-width:1100px){.page-body .prose-grid{grid-template-columns:minmax(0,1fr) 300px;gap:72px}.page-aside{position:sticky;top:32px;align-self:start}}
.toc{border-top:2px solid var(--ardoise);padding-top:14px}
.toc-h{font-family:var(--f-display);font-stretch:88%;font-weight:680;margin-bottom:8px}
.toc ol{margin:0;padding-left:1.3em;font-family:var(--f-display);font-stretch:94%;font-size:.95rem;line-height:1.4}
.toc li{padding:5px 0}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline;text-decoration-color:var(--tanne)}
.aside-cta{margin-top:28px;padding:20px;background:var(--estran-2);border-radius:var(--radius)}
.aside-cta p{font-size:1rem;line-height:1.45}

/* Pages communes */
.links-row{display:flex;flex-wrap:wrap;gap:12px 28px}
.city-hero-grid{display:grid;gap:36px;align-items:start}
.city-kicker{font-family:var(--f-display);font-stretch:90%;font-weight:600;color:var(--tanne-clair);margin-bottom:12px}
.city-hero .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.city-hero .btn-ghost{background:var(--ardoise)}
.city-hero h1{max-width:none}
.locator{position:relative;margin:0 0 8px;max-width:440px}
.locator img{width:100%;height:auto}
.locator figcaption{font-family:var(--f-display);font-stretch:92%;font-size:.86rem;color:var(--brume);margin-top:8px}
.pin{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--brume);box-shadow:0 0 0 3px var(--ardoise)}
.pin-city{width:18px;height:18px;margin:-9px 0 0 -9px;background:var(--tanne-clair);box-shadow:0 0 0 4px var(--ardoise),0 0 0 9px rgba(208,148,102,.28)}
.pin-label{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);white-space:nowrap;font-family:var(--f-display);font-stretch:86%;font-weight:640;font-size:.92rem;color:var(--chaux);text-shadow:0 1px 3px var(--ardoise),0 0 6px var(--ardoise)}
.pin-base .pin-label{font-weight:500;font-size:.8rem;color:var(--brume)}
.pin-label-left{left:auto;right:calc(100% + 8px)}
.pin-label-below{left:50%;top:calc(100% + 4px);transform:translateX(-50%)}
.city-facts div{padding:9px 0}
@media (min-width:600px){.city-facts div{grid-template-columns:130px 1fr}}
@media (min-width:960px){.city-hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,5vw,80px)}}
.city-body .prose h3{font-size:var(--step-1);margin:1.4em 0 .4em}
.nearby{list-style:none;padding:0!important;display:grid;gap:0 28px}
.nearby li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--estran);margin:0!important;font-family:var(--f-display);font-stretch:92%}
.nearby span{color:var(--granit)}
@media (min-width:600px){.nearby{grid-template-columns:1fr 1fr}}
.city-works{background:var(--estran-2)}
.city-works-grid{display:grid;gap:18px}
.city-works-grid .work-img img{aspect-ratio:4/3}
@media (min-width:760px){.city-works-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.city-works-grid .work-img img{aspect-ratio:4/5}}
.city-works-grid .work-title{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem)}
.zones-hero{display:grid;gap:36px;align-items:center}
.zones-hero h1{max-width:20ch}
@media (min-width:960px){.zones-hero{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.locator-all .dot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--tanne-clair);box-shadow:0 0 0 2px var(--ardoise)}
.locator-all .dot:hover,.locator-all .dot:focus-visible{background:var(--chaux);transform:scale(1.3)}
.zones-intro{margin-bottom:2em}
.zones-table caption{font-size:1.15rem;color:var(--ardoise);padding-top:1.2em}
.zones-table table{min-width:760px}
.zones-table tbody th a{text-decoration-color:var(--tanne)}

/* Site lié */
.ext-site{margin:2.4em 0 0;padding:28px 28px 22px;background:var(--ardoise);color:var(--chaux);border-radius:var(--radius)}
.prose .ext-site h2{margin-top:.2em;color:var(--chaux)}
.ext-kicker{font-family:var(--f-display);font-stretch:90%;font-weight:600;color:var(--tanne-clair);margin-bottom:6px}
.ext-site p{color:#dfe3e0}
.btn-ghost-dark{border:1.5px solid var(--chaux);color:var(--chaux);background:transparent}
.btn-ghost-dark:hover{background:var(--ardoise-2)}
.footer-site-label{display:block;font-size:.85rem;color:var(--brume)}
.footer-h-sites{margin-top:22px}

/* Page des règles par commune */
.container-full{max-width:var(--maxw)}
.regles-hero-grid{display:grid;gap:36px;align-items:center}
.regles-hero h1{max-width:22ch}
.regles-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.regles-hero .btn-ghost{background:var(--ardoise)}
@media (min-width:960px){.regles-hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}}
.locator-all .dot{background:var(--brume)}
.locator-all .dot-littoral{background:var(--tanne-clair)}
.locator-all figcaption{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.key{display:inline-block;width:10px;height:10px;border-radius:50%}
.key-littoral{background:var(--tanne-clair)}.key-inland{background:var(--brume);margin-left:8px}
.regles-key{padding-block:clamp(36px,4vw,56px);background:var(--estran-2)}
.key-figures{list-style:none;margin:0;padding:0;display:grid;gap:18px 28px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.key-figures li{border-top:2px solid var(--ardoise);padding-top:12px}
.key-figures b{display:block;font-family:var(--f-display);font-stretch:68%;font-weight:800;font-size:clamp(2rem,1.5rem + 1.6vw,2.9rem);line-height:1}
.key-figures span{display:block;margin-top:6px;font-size:.98rem;line-height:1.4;color:var(--granit)}
.regles-table-section{padding-top:clamp(48px,6vw,88px)}
.table-tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 28px;margin-bottom:18px;font-family:var(--f-display);font-stretch:92%}
.tool-search{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.95rem}
.tool-search input{min-width:min(320px,80vw);min-height:44px;padding:8px 12px;border:1.5px solid var(--granit);border-radius:var(--radius);background:var(--blanc);font:inherit;font-weight:400}
.tool-check{display:flex;align-items:center;gap:8px;min-height:44px;font-size:.98rem}
.tool-check input{width:18px;height:18px;accent-color:var(--tanne)}
.tool-count{margin:0 0 0 auto;color:var(--granit);font-size:.95rem;align-self:center}
.regles-wrap{margin:0;border:1px solid var(--estran);background:var(--blanc);max-height:min(80vh,1100px);overflow:auto}
.regles-wrap:focus-visible{outline:2px solid var(--tanne-clair)}
table.regles{min-width:1560px;font-size:.95rem;border-collapse:separate;border-spacing:0}
table.regles th,table.regles td{padding:10px 14px;border-top:1px solid var(--estran);vertical-align:top}
table.regles thead th{position:sticky;top:0;z-index:2;background:var(--ardoise);color:var(--chaux);border:0;vertical-align:bottom;font-weight:620;line-height:1.2}
table.regles thead th:first-child{left:0;z-index:3}
table.regles tbody th{position:sticky;left:0;z-index:1;background:var(--blanc);font-family:var(--f-display);font-stretch:88%;font-weight:680;min-width:150px;box-shadow:1px 0 0 var(--estran)}
table.regles tbody tr:nth-child(even) td,table.regles tbody tr:nth-child(even) th{background:#f6f5f0}
table.regles tbody tr:hover td,table.regles tbody tr:hover th{background:#eceae3}
table.regles .num{text-align:right;font-variant-numeric:tabular-nums}
table.regles .cp,table.regles .sub{display:block;font-family:var(--f-display);font-stretch:92%;font-weight:400;font-size:.82rem;color:var(--granit)}
table.regles tbody th a{text-decoration-color:var(--tanne)}
table.regles sup a{color:var(--tanne-clair);text-decoration:none;font-size:.75rem;margin-left:2px}
.sort-btn{all:unset;cursor:pointer;display:inline-flex;align-items:flex-end;gap:6px;font:inherit;color:inherit;text-align:left}
.sort-btn:focus-visible{outline:2px solid var(--tanne-clair);outline-offset:3px}
.num .sort-btn{justify-content:flex-end;width:100%}
.sort-ind{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid rgba(241,241,236,.35);margin-bottom:4px}
th[aria-sort="ascending"] .sort-ind{border-top:0;border-bottom:5px solid var(--tanne-clair)}
th[aria-sort="descending"] .sort-ind{border-top-color:var(--tanne-clair)}
.tag{display:inline-block;font-family:var(--f-display);font-stretch:92%;font-weight:620;font-size:.82rem;line-height:1;padding:5px 7px 4px;border-radius:var(--radius);background:var(--estran-2);color:var(--ardoise)}
.tag-yes{background:var(--ardoise);color:var(--chaux)}
.regles-note{margin-top:14px;max-width:70em}
.regles-method-grid{display:grid;gap:48px}
.regles-method-grid .prose{max-width:none}
@media (min-width:1100px){.regles-method-grid{grid-template-columns:1fr 1fr;gap:72px}}
.sources-cols{padding-left:0!important;list-style:none}
.sources-cols li{padding:12px 0;border-top:1px solid var(--estran);margin:0!important;font-size:.98rem;line-height:1.55}
.sources-cols li:target{background:var(--estran-2)}
.verif li{font-size:.98rem}
.verif .tag{margin-right:6px}
.regles-method h3{font-size:var(--step-1);margin:1.4em 0 .5em}