:root{--marine:#1c3144;--or:#c8962e;--encre:#1b1b1b;--fond:#fff}
*{box-sizing:border-box;margin:0}
body{font:18px/1.6 "Source Sans 3",system-ui,sans-serif;color:var(--encre);background:var(--fond)}
h2{font:400 clamp(2rem,5vw,3rem)/1.1 "Anton",Impact,sans-serif;text-transform:none;text-align:center;margin-bottom:22px}
img{display:block;max-width:100%;background:#e6e3dc}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
a{color:var(--marine)}
a:focus-visible,img:focus-visible,button:focus-visible{outline:3px solid var(--or);outline-offset:2px}
section{padding:40px 4vw}
.centre{text-align:center}
.centre p{max-width:34em;margin:0 auto 6px}

.hero{position:relative;min-height:340px;background:var(--marine)}
.hero-img{width:100%;height:clamp(340px,58vw,640px);object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.25),transparent 55%,rgba(0,0,0,.35))}
.logo{position:absolute;z-index:1;top:3%;left:3%;width:clamp(130px,26vw,300px);background:none}
.baseline{position:absolute;z-index:1;right:3%;bottom:6%;font:clamp(1.3rem,4vw,2.6rem)/1.1 "Kaushan Script",cursive;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6);text-align:right}

.services{list-style:none;padding:0;max-width:1240px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.services li{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:6px;background:#e6e3dc}
.services img{width:100%;height:100%;object-fit:cover}
.bandeau{position:absolute;left:0;right:0;bottom:0;display:flex;gap:10px;align-items:center;padding:10px 12px;background:rgba(28,49,68,.9);color:#fff}
.ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--or);font-size:1.1rem}
.bandeau h3{font-size:.92rem;font-weight:700;text-transform:uppercase;line-height:1.2}
.bandeau p{font-size:.8rem;line-height:1.25}

.galerie{columns:5 190px;column-gap:14px;max-width:1240px;margin:auto}
.galerie img{width:100%;margin-bottom:14px;border-radius:4px;cursor:zoom-in;break-inside:avoid}
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;max-width:1000px;margin:auto}
.duo img{width:100%;cursor:zoom-in;border-radius:4px}

#contact{background:var(--marine);color:#fff}
#contact a{color:var(--or)}
.coord{font-size:1.3rem;font-weight:600}
footer{padding:18px 4vw;text-align:center;font-size:.85rem;background:#111;color:#aaa}
dialog{border:0;background:none;max-width:95vw;max-height:95vh;padding:0}
dialog::backdrop{background:rgba(0,0,0,.85)}
dialog img{max-height:92vh;margin:auto;cursor:zoom-out}
dialog button{display:none}
@media(max-width:900px){.services{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.services{grid-template-columns:1fr}.logo{width:44vw}}