@font-face{font-family:"Mincho";src:url(fonts/zen-old-mincho-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Kaku";src:url(fonts/zen-kaku-gothic-new-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Kaku";src:url(fonts/zen-kaku-gothic-new-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --ink:#15171a; --shikkui:#e9e7e1; --stone:#dcd9d1; --grey:#575955; --indigo:#26365a; --line:rgba(21,23,26,.28);
  --serif:"Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Kaku","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --pad:clamp(20px,5vw,64px);
  --grain:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='420'%20height='420'%3E%3Cfilter%20id='g'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.9'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%20.08%20%200%200%200%200%20.08%20%200%200%200%200%20.07%20%200%200%200%20.075%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23g)'/%3E%3C/svg%3E");
  --cloud:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='1200'%3E%3Cfilter%20id='c'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.004%20.009'%20numOctaves='2'%20seed='7'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%20.35%20%200%200%200%200%20.34%20%200%200%200%200%20.30%20%200%200%200%20.16%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23c)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:400 16.5px/1.9 var(--sans);background-color:var(--shikkui);background-image:var(--grain),var(--cloud);-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--indigo);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.v{writing-mode:vertical-rl;text-orientation:mixed}
.todo{background:rgba(217,164,65,.28);border-bottom:1px dotted #8a6a1f}

/* Bandeau de maquette */
.mock{background:var(--ink);color:#fff;padding:9px var(--pad);font-size:.82rem;line-height:1.5}
.mock p{margin:0}
.mock .todo{background:rgba(255,255,255,.18);border-bottom-color:#fff}

.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px var(--pad)}
.brand{font:500 .95rem var(--sans);letter-spacing:.06em;text-decoration:none}
.top-tel{font:500 .95rem var(--sans);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;border-bottom:1px solid var(--ink)}

/* Hero : une idée, beaucoup d'espace */
.hero{position:relative;overflow-x:clip;min-height:calc(100svh - 120px);display:flex;align-items:flex-end;padding:0 var(--pad) clamp(40px,9vh,96px) calc(var(--pad) + 44px)}
.since{position:absolute;left:var(--pad);top:clamp(24px,6vh,64px);margin:0;font:500 .9rem var(--sans);letter-spacing:.18em;color:var(--grey)}
.hero-body{max-width:880px}
h1{font-size:clamp(2.7rem,9.4vw,6.4rem);line-height:1.12;letter-spacing:.01em}
h1 .l{display:block}
.hero-sub{margin:clamp(18px,3vh,32px) 0 clamp(26px,4vh,40px);color:var(--grey);max-width:30em}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 30px;background:var(--indigo);color:#fff;font:500 1rem var(--sans);letter-spacing:.04em;text-decoration:none;border:1px solid var(--indigo);border-radius:0;cursor:pointer}
.btn:hover{background:var(--ink);border-color:var(--ink)}

/* Un seul moment animé : l'apparition du titre */
@keyframes rise{from{opacity:0;transform:translateY(.35em);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
h1 .l{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
h1 .l:nth-child(2){animation-delay:.18s}
h1 .l:nth-child(3){animation-delay:.36s}
@media (prefers-reduced-motion:reduce){h1 .l{animation:none}html{scroll-behavior:auto}}

/* Phrase d'ouverture sur fond sumi */
.statement{background:var(--ink);color:var(--shikkui);padding:clamp(88px,16vh,190px) var(--pad)}
.statement p{margin:0 auto 0 0;max-width:20em;font:500 clamp(1.55rem,4.3vw,3rem)/1.65 var(--serif);text-wrap:balance}
@media (min-width:860px){.statement p{margin-left:12%}}

/* Métiers : titres verticaux */
.crafts{padding:clamp(72px,12vh,140px) 0 0}
.panels{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.panel{display:grid;grid-template-columns:clamp(76px,22vw,110px) 1fr;min-height:250px;border-bottom:1px solid var(--line)}
.panel h3{padding:22px 0 22px var(--pad);font-size:clamp(2.2rem,8vw,3rem);line-height:1;letter-spacing:.08em;justify-self:start}
.panel p{align-self:end;margin:0;padding:22px var(--pad) 26px 12px;max-width:30em}
.note{padding:16px var(--pad) 0;margin:0;font-size:.9rem;color:var(--grey)}
@media (min-width:860px){
  .panels{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .panel{display:flex;flex-direction:column;justify-content:space-between;min-height:620px;border-bottom:0;border-left:1px solid var(--line);padding:30px 26px 30px}
  .panel:first-child{border-left:0}
  .panel h3{padding:0;font-size:clamp(3rem,4.6vw,4.3rem);align-self:flex-start}
  .panel p{padding:0;font-size:.97rem}
}

/* Chantiers : trois emplacements asymétriques */
.work{padding:clamp(88px,14vh,170px) var(--pad) 0}
h2{font-size:clamp(1.9rem,5vw,3rem);line-height:1.2;letter-spacing:.04em;margin-bottom:clamp(28px,5vh,56px)}
.work-grid{display:grid;gap:34px}
.work-grid figure{margin:0}
.ph{display:flex;align-items:center;justify-content:center;text-align:center;aspect-ratio:4/5;padding:24px;background-color:var(--stone);background-image:var(--grain),var(--cloud);border:1px solid var(--line);color:var(--grey);font-size:.9rem;line-height:1.6}
.w2 .ph,.w3 .ph{aspect-ratio:1/1}
.work-grid figcaption{margin-top:10px;font-size:.88rem;color:var(--grey)}
@media (min-width:860px){
  .work-grid{grid-template-columns:repeat(12,1fr);column-gap:28px;row-gap:56px;align-items:start}
  .w1{grid-column:1/8}
  .w2{grid-column:9/13;align-self:end}
  .w3{grid-column:4/9;margin-top:-10px}
}

/* Contact */
.contact{display:grid;gap:56px;padding:clamp(96px,16vh,190px) var(--pad) 0}
address{font-style:normal;font-size:1.1rem;line-height:1.9;margin-bottom:22px}
address a{font:500 1.5rem var(--serif);text-decoration:none;border-bottom:1px solid var(--ink)}
.hours{display:grid;grid-template-columns:auto 1fr;gap:6px 26px;max-width:24em;margin:0 0 22px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hours dt{font-weight:500}
.hours dd{margin:0}
.lien{font-weight:500}
.contact-info p{margin:6px 0}
form{display:grid;gap:6px;max-width:520px}
form h3{font-size:1.6rem;letter-spacing:.04em;margin-bottom:12px}
label{font-size:.88rem;color:var(--grey);margin-top:16px}
input,textarea{font:inherit;padding:10px 0;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;width:100%}
input:focus,textarea:focus{outline:0;border-bottom:2px solid var(--indigo)}
textarea{resize:vertical}
.hp{position:absolute;left:-9999px}
form .btn{margin-top:26px;justify-self:start}
@media (min-width:860px){.contact{grid-template-columns:1fr 1fr;gap:96px}}

footer{margin-top:clamp(96px,16vh,190px);padding:32px var(--pad);background:var(--ink);color:#cfd1cc;font-size:.9rem}
footer p{margin:4px 0}
footer a{margin-right:20px}

/* Pages légales */
.legal-page{background:var(--shikkui)}
.legal{max-width:720px;margin:0 auto;padding:30px var(--pad) 70px}
.legal h1{font-size:2.4rem;margin:22px 0 16px;animation:none}
.legal h2{font-size:1.4rem;margin:30px 0 8px;letter-spacing:.02em}
.legal .draft{background:rgba(217,164,65,.28);border:1px solid #8a6a1f;padding:12px 14px}


/* ===== Illustrations du métier ===== */
svg.ico,svg.trowel{color:var(--indigo);fill:none}

/* Nuancier en éventail (peinture) */
.fan{position:absolute;right:calc(var(--pad) + 70px);top:215px;width:0;height:0;pointer-events:none}
.fan i{position:absolute;left:-26px;bottom:0;width:52px;height:150px;background:linear-gradient(var(--c) 0 70%,#f6f5f0 70%);border:1px solid rgba(21,23,26,.3);box-shadow:0 2px 8px rgba(21,23,26,.12);transform-origin:50% 100%;transform:rotate(var(--r));animation:fan 1.3s cubic-bezier(.2,.7,.2,1) .5s both}
.fan i::after{content:"";position:absolute;left:50%;bottom:9px;width:8px;height:8px;margin-left:-4px;border-radius:50%;border:1px solid rgba(21,23,26,.35);background:var(--shikkui)}
@keyframes fan{from{transform:rotate(0)}to{transform:rotate(var(--r))}}
@media (min-width:860px){
  .fan{right:calc(var(--pad) + 120px);top:min(46vh,430px)}
  .fan i{left:-40px;width:80px;height:250px}
}
@media (prefers-reduced-motion:reduce){.fan i{animation:none}}

/* Truelle dans le bandeau sombre + coulures d'encre vers la section suivante */
.statement{position:relative}
.statement .trowel{position:absolute;right:var(--pad);top:clamp(24px,5vw,56px);width:clamp(110px,20vw,260px);height:clamp(110px,20vw,260px);color:rgba(233,231,225,.28);transform:rotate(-12deg)}
.statement::after{content:"";position:absolute;left:0;right:0;top:100%;height:100px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='110'%3E%3Crect width='900' height='9' fill='%2315171a'/%3E%3Cpath d='M58 0 C64 3 65 8 65 18 V46 H75 V18 C75 8 76 3 82 0Z' fill='%2315171a'/%3E%3Ccircle cx='70' cy='46' r='8.5' fill='%2315171a'/%3E%3Cpath d='M198 0 C204 3 205 8 205 18 V86 H215 V18 C215 8 216 3 222 0Z' fill='%2315171a'/%3E%3Ccircle cx='210' cy='86' r='8.5' fill='%2315171a'/%3E%3Cpath d='M368 0 C374 3 375 8 375 18 V34 H385 V18 C385 8 386 3 392 0Z' fill='%2315171a'/%3E%3Ccircle cx='380' cy='34' r='8.5' fill='%2315171a'/%3E%3Cpath d='M508 0 C514 3 515 8 515 18 V64 H525 V18 C525 8 526 3 532 0Z' fill='%2315171a'/%3E%3Ccircle cx='520' cy='64' r='8.5' fill='%2315171a'/%3E%3Cpath d='M678 0 C684 3 685 8 685 18 V96 H695 V18 C695 8 696 3 702 0Z' fill='%2315171a'/%3E%3Ccircle cx='690' cy='96' r='8.5' fill='%2315171a'/%3E%3Cpath d='M808 0 C814 3 815 8 815 18 V40 H825 V18 C825 8 826 3 832 0Z' fill='%2315171a'/%3E%3Ccircle cx='820' cy='40' r='8.5' fill='%2315171a'/%3E%3C/svg%3E") repeat-x 0 0/900px 110px;pointer-events:none}

/* Icônes par métier */
.panel{position:relative}
.panel .ico{position:absolute;top:22px;right:var(--pad);width:56px;height:56px}
@media (min-width:860px){
  .panel .ico{position:static;width:96px;height:96px;margin:auto 0 28px;align-self:flex-start}
}

/* Niveau à bulle */
.level{margin:clamp(72px,11vh,130px) var(--pad) 0;max-width:560px;color:var(--grey)}
.level svg{display:block;width:100%;height:auto}
.level circle[fill]{color:var(--indigo)}

/* Repères de chantier sur les emplacements photo */
.ph{position:relative}
.ph::before,.ph::after{content:"";position:absolute;width:16px;height:16px;border:0 solid var(--ink)}
.ph::before{top:10px;left:10px;border-top-width:1px;border-left-width:1px}
.ph::after{bottom:10px;right:10px;border-bottom-width:1px;border-right-width:1px}