.hero{min-height:clamp(560px,88svh,900px);padding:clamp(3rem, 8vw, 6rem) var(--marge) clamp(3rem, 6vw, 5rem);--taille-titre:clamp(2.8rem, 9vw, 7rem);flex-direction:column;justify-content:center;display:flex;position:relative;overflow:hidden}.hero-contenu{z-index:2;max-width:var(--large);width:100%;margin-inline:auto;position:relative}.palette{z-index:1;mix-blend-mode:multiply;pointer-events:none;width:clamp(340px,46vw,700px);height:auto;position:absolute;top:50%;right:-8%;transform:translateY(-50%)rotate(-6deg)}.palette .coup{clip-path:polygon(-6% 0,0% 0,-6% 100%,-12% 100%);animation:1s cubic-bezier(.3,.78,.28,1) forwards poser}.palette .coup:first-child{animation-delay:.75s}.palette .coup:nth-child(2){animation-delay:.92s}.palette .coup:nth-child(3){animation-delay:1.09s}.palette .coup:nth-child(4){animation-delay:1.26s}@keyframes poser{to{clip-path:polygon(-6% 0,112% 0,106% 100%,-12% 100%)}}@media (max-width:900px){.palette{opacity:.32;right:-30%}}.exergue{font-family:var(--serif);color:var(--terre);margin-bottom:clamp(1rem,3vw,2rem);font-size:clamp(1.05rem,2.1vw,1.5rem);font-style:italic;font-weight:400}.titre-peint{display:inline-block;position:relative}.titre-peint h1{z-index:2;font-size:var(--taille-titre);position:relative}.trait{z-index:1;width:104.5%;height:calc(var(--taille-titre) * .32);left:-1.5%;bottom:calc(var(--taille-titre) * .02);clip-path:polygon(-8% 0,0% 0,-8% 100%,-16% 100%);animation:1.4s cubic-bezier(.32,.72,.25,1) .4s forwards peindre;position:absolute}@keyframes peindre{to{clip-path:polygon(-8% 0,116% 0,108% 100%,-16% 100%)}}.promesse{max-width:32ch;margin-top:clamp(1.6rem,4vw,2.6rem);font-size:clamp(1.15rem,2.4vw,1.6rem);font-weight:300;line-height:1.5}.promesse strong{font-weight:700}.actions{flex-wrap:wrap;gap:.8rem;margin-top:clamp(1.8rem,4vw,2.6rem);display:flex}.bouton{border:2px solid var(--outremer);border-radius:999px;padding:.95rem 1.7rem;font-size:1rem;font-weight:700;text-decoration:none;transition:transform .18s,background .25s,color .25s,border-color .25s;display:inline-block}.bouton-plein{background:var(--outremer);color:var(--gesso)}.bouton-plein:hover{background:var(--magenta);border-color:var(--magenta);transform:translateY(-2px)}.bouton-vide{color:var(--outremer)}.bouton-vide:hover{background:var(--outremer);color:var(--gesso);transform:translateY(-2px)}@media (prefers-reduced-motion:reduce){.trait,.palette .coup{clip-path:polygon(-8% 0,116% 0,108% 100%,-16% 100%)}}
.intro-section{max-width:54ch;color:var(--texte-doux);margin-top:1rem}.faire{grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2vw,1.6rem);margin-top:clamp(2.5rem,6vw,4rem);display:grid}.metier{background:var(--gesso-fonce);border:1px solid var(--mars);flex-direction:column;min-height:clamp(230px,26vw,330px);padding:clamp(1.7rem,3.4vw,2.8rem);display:flex;position:relative;overflow:hidden}.metier:first-child{grid-column:span 7}.metier:nth-child(2),.metier:nth-child(3){grid-column:span 5}.metier:nth-child(4){grid-column:span 7}.metier:first-child{--pigment:var(--magenta)}.metier:nth-child(2){--pigment:var(--outremer)}.metier:nth-child(3){--pigment:var(--veronese)}.metier:nth-child(4){--pigment:var(--terre)}@media (max-width:820px){.metier:first-child,.metier:nth-child(2),.metier:nth-child(3),.metier:nth-child(4){grid-column:1/-1}.metier{min-height:0}}.metier .fond{z-index:0;background:var(--pigment);border-radius:40% 60% 0 0/16% 12% 0 0;transition:transform .55s cubic-bezier(.22,.9,.3,1);position:absolute;inset:-30% -10% -10%;transform:translateY(100%)rotate(-1.5deg)}.metier:hover .fond,.metier:focus-within .fond{transform:translateY(0)rotate(0)}.metier>:not(.fond){z-index:1;transition:color .3s .3s;position:relative}.metier:hover h3,.metier:hover p,.metier:focus-within h3,.metier:focus-within p{color:var(--gesso)}.metier h3{margin-bottom:.8rem}.metier .note{color:var(--texte-doux);margin:auto 0 0;font-size:.88rem}.metier:hover .note,.metier:focus-within .note{color:color-mix(in srgb, var(--gesso) 78%, transparent)}.metier h3{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.galerie{background:var(--mars);color:var(--gesso)}.galerie h2{color:var(--gesso)}.galerie .intro-section{color:color-mix(in srgb, var(--gesso) 70%, transparent);max-width:52ch;margin-top:1rem}.accrochage{columns:3;column-gap:clamp(1rem,2.4vw,2rem);margin-top:clamp(2.5rem,6vw,4rem)}@media (max-width:900px){.accrochage{columns:2}}@media (max-width:560px){.accrochage{columns:1}}.toile{break-inside:avoid;opacity:0;margin-bottom:clamp(1.5rem,3.4vw,2.6rem);transition:opacity .8s,transform .8s cubic-bezier(.22,.9,.3,1);transform:translateY(26px)}.toile.posee{opacity:1;transform:none}.toile img{width:100%;height:auto;box-shadow:0 18px 46px #0000008c}.toile figcaption{font-family:var(--serif);margin-top:.85rem;font-size:1.05rem;font-weight:600}.toile .format{font-family:var(--sans);color:color-mix(in srgb, var(--gesso) 58%, transparent);margin-top:.15rem;font-size:.85rem;font-weight:400;display:block}@media (prefers-reduced-motion:reduce){.toile{opacity:1;transform:none}}
.realisations{background:var(--mars);color:var(--gesso)}.realisations h2{color:var(--gesso)}.realisations .intro-section{color:color-mix(in srgb, var(--gesso) 70%, transparent);max-width:52ch;margin-top:1rem}.liste{border-top:1px solid color-mix(in srgb, var(--gesso) 26%, transparent);margin-top:clamp(2.5rem,6vw,4rem)}.projet{border-bottom:1px solid color-mix(in srgb, var(--gesso) 26%, transparent);grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto;align-items:baseline;gap:1rem clamp(1rem,3vw,2.5rem);padding:clamp(1.4rem,3vw,2.2rem) 0;text-decoration:none;transition:padding-left .4s cubic-bezier(.22,.9,.3,1);display:grid;position:relative}.projet:before{content:"";z-index:0;background:var(--pigment);width:0;transition:width .45s cubic-bezier(.22,.9,.3,1);position:absolute;top:0;bottom:0;left:0}.projet:hover:before,.projet:focus-visible:before{width:100%}.projet:hover,.projet:focus-visible{padding-left:clamp(.8rem,2vw,1.8rem);padding-right:clamp(.8rem,2vw,1.8rem)}.projet>*{z-index:1;position:relative}.projet .nom{font-family:var(--serif);font-size:clamp(1.5rem,3.6vw,2.6rem);font-weight:600;line-height:1.05}.projet .resume{color:color-mix(in srgb, var(--gesso) 66%, transparent);max-width:46ch;font-size:.98rem;transition:color .3s}.projet:hover .resume,.projet:focus-visible .resume{color:#ffffffe0}.projet .etat{white-space:nowrap;align-self:center;padding-right:clamp(.5rem,2vw,1.6rem);font-size:.85rem;font-weight:700}@media (max-width:820px){.projet{grid-template-columns:1fr}.projet .etat{align-self:start}}.projet:first-child{--pigment:var(--magenta)}.projet:nth-child(2){--pigment:var(--outremer)}.projet:nth-child(3){--pigment:var(--veronese)}.projet:nth-child(4){--pigment:var(--terre)}.projet:nth-child(5){--pigment:var(--cadmium)}.projet:nth-child(6){--pigment:var(--outremer)}.projet:nth-child(5):hover .nom,.projet:nth-child(5):hover .resume,.projet:nth-child(5):hover .etat,.projet:nth-child(5):focus-visible .nom,.projet:nth-child(5):focus-visible .resume,.projet:nth-child(5):focus-visible .etat{color:var(--mars)}
.etapes{counter-reset:etape;margin-top:clamp(2.5rem,6vw,4rem)}.etape{counter-increment:etape;border-top:1px solid color-mix(in srgb, var(--mars) 18%, transparent);grid-template-columns:auto 1fr;gap:clamp(1.2rem,3vw,2.5rem);padding:clamp(1.5rem,3vw,2.2rem) 0;display:grid}.etape:last-child{border-bottom:1px solid color-mix(in srgb, var(--mars) 18%, transparent)}.etape:before{content:counter(etape, decimal-leading-zero);font-family:var(--serif);color:var(--outremer);font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:900;line-height:1}.etape h3{margin-bottom:.4rem}.etape p{color:var(--texte-doux);margin:0}
.contact{background:var(--cadmium)}.contact h2{max-width:16ch}.contact .accroche{max-width:48ch;margin-top:1.2rem;font-size:1.15rem}.coords{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(1.4rem,3vw,2.5rem);margin-top:clamp(2rem,5vw,3rem);display:grid}.coord{border-top:2px solid var(--mars);padding-top:.9rem}.coord .quoi{margin-bottom:.35rem;font-size:.85rem;font-weight:700;display:block}.coord a,.coord .valeur{font-family:var(--serif);border-bottom:2px solid #0000;font-size:clamp(1.1rem,2vw,1.45rem);font-weight:600;text-decoration:none;transition:border-color .25s}.coord a:hover{border-bottom-color:var(--mars)}
