:root{--ink:#111827;--mute:#6b7280;--bg:#fff;--alt:#f3f4f6;--dark:#1f2937;--accent:#f59e0b;--line:#e5e7eb}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.top{position:sticky;top:0;background:var(--dark);color:#fff;z-index:10}
.bar{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;flex-wrap:wrap}
.brand{font-weight:700;font-size:18px;text-decoration:none}
nav{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
nav a{text-decoration:none;color:#d1d5db;font-size:15px}
nav a:hover{color:#fff}
nav a.cta{background:var(--accent);color:#111;padding:6px 14px;border-radius:8px;font-weight:600}
.hero{background:linear-gradient(135deg,#1f2937,#374151);color:#fff;padding:72px 0}
.hero h1{font-size:clamp(28px,5vw,48px);line-height:1.15;margin:0 0 16px;max-width:18ch}
.hero p{max-width:56ch;color:#e5e7eb}
.btn{display:inline-block;background:var(--accent);color:#111;border:0;border-radius:8px;padding:10px 18px;font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.btn.ghost{background:transparent;color:#fff;border:1px solid #9ca3af}
.section{padding:56px 0}
.section.alt{background:var(--alt)}
.section.alt .wrap,.wrap.section{padding-top:0}
h2{font-size:28px;margin:0 0 12px}
.muted{color:var(--mute)}
.small{font-size:13px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.card>h3,.card>p{margin:0;padding:12px 16px 0}
.card>p:last-child{padding-bottom:16px}
.card h3{font-size:18px}
.card .photo{aspect-ratio:4/3;background:var(--line);display:flex;align-items:center;justify-content:center;font-size:48px;overflow:hidden}
.card .photo img{width:100%;height:100%;object-fit:cover;display:block}
.card .body{padding:12px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.card .body h3{margin:0;padding:0}
.card .body p{margin:0;padding:0;color:var(--mute);font-size:14px}
.card .body .btn{margin-top:auto;align-self:flex-start;font-size:14px;padding:8px 14px}
.tag{font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:32px}
@media (max-width:760px){.contact{grid-template-columns:1fr}.hero{padding:48px 0}}
address{font-style:normal;margin-top:16px;display:flex;flex-direction:column;gap:6px}
form{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}
label{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:500}
input,textarea{font:inherit;padding:10px;border:1px solid #cbd5e1;border-radius:8px;width:100%}
input:focus,textarea:focus,.btn:focus-visible,a:focus-visible{outline:3px solid #fbbf24;outline-offset:1px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
fieldset{border:1px solid var(--line);border-radius:8px;padding:8px 12px}
fieldset label{flex-direction:row;align-items:center;gap:8px;font-weight:400}
fieldset input{width:auto}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#statut{margin:0;min-height:1.5em;font-weight:500}
#statut.ok{color:#166534}#statut.err{color:#b91c1c}
.foot{background:var(--dark);color:#9ca3af;padding:24px 0;font-size:14px}
.foot a{color:#d1d5db}

.brand{display:inline-flex;align-items:center;gap:10px}
.brand img{border-radius:4px;background:#fff;display:block}
/* Bascule de langue et arabe (RTL) */
.lang{background:transparent;color:#fff;border:1px solid #9ca3af;border-radius:8px;padding:4px 12px;font:inherit;font-size:14px;cursor:pointer}
.lang:hover{background:rgba(255,255,255,.1)}
html[dir="rtl"] body{font-family:system-ui,-apple-system,"Segoe UI",Tahoma,"Noto Naskh Arabic","Geeza Pro",sans-serif;line-height:1.8}
html[dir="rtl"] .hp{left:auto;right:-9999px}

/* Brochure: projets, équipements, valeurs */
.eyebrow{color:#fbbf24;font-weight:600;font-size:15px;margin:0 0 12px;max-width:60ch}
.hero h1{max-width:20ch}
.card ul{margin:0;padding:8px 16px 16px 36px;color:var(--mute);font-size:14px;display:flex;flex-direction:column;gap:6px}
html[dir="rtl"] .card ul{padding:8px 36px 16px 16px}
.chips{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:500}
.section.alt .chips li{background:#fff}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:32px}
@media (max-width:760px){.duo{grid-template-columns:1fr}}

/* Photos */
.hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:center}
.hero-photo{margin:0}
.hero-photo img{width:100%;height:auto;max-height:440px;object-fit:cover;display:block;border-radius:20px;box-shadow:0 12px 32px rgba(0,0,0,.4);border:3px solid rgba(245,158,11,.9)}
.about{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.about-photo{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;display:block;border-radius:16px}
.svc-photo{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.card h3{line-height:1.3}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}.hero-photo img{max-height:260px}}
@media (max-width:760px){.about{grid-template-columns:1fr}}
.wrap.section{padding-left:16px;padding-right:16px}

/* Brochure */
.pages{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:20px}
.pages figure{margin:0}
.pages figcaption{margin-top:8px;font-weight:600;text-align:center}
button.page{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;cursor:zoom-in;box-shadow:0 4px 14px rgba(0,0,0,.08)}
button.page img{width:100%;height:auto;display:block}
button.page:hover{box-shadow:0 6px 20px rgba(0,0,0,.18)}
button.page:focus-visible{outline:3px solid #fbbf24;outline-offset:2px}
dialog#viewer{border:0;padding:0;background:transparent;max-width:98vw;max-height:98vh;overflow:visible}
dialog#viewer::backdrop{background:rgba(0,0,0,.8)}
#viewer-img{display:block;max-width:96vw;max-height:84vh;width:auto;height:auto;margin:0 auto;border-radius:8px;background:#fff}
#viewer-open{display:block;text-align:center;color:#fff;margin-top:10px;font-size:14px}
.viewer-close{position:absolute;top:-14px;inset-inline-end:-6px;z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:#fff;color:#111;font-size:18px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.4)}

/* Cartes de visite */
.cartes{display:flex;gap:24px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:20px}
.cartes img{height:auto;max-width:100%;filter:drop-shadow(0 6px 14px rgba(0,0,0,.18))}
.cartes img:first-child{width:min(100%,460px)}
.cartes img:last-child{width:min(100%,340px)}


/* Album: lignes justifiées (mise en page calculée dans site.js; les photos gardent leurs proportions) */
.album{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.album-row{display:flex;gap:10px}
.album figure{margin:0;flex:none}
button.photo-btn{display:block;width:100%;height:100%;padding:0;border:0;border-radius:10px;overflow:hidden;background:#e5e7eb;cursor:zoom-in}
button.photo-btn img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
button.photo-btn:hover img{transform:scale(1.03)}
button.photo-btn:focus-visible{outline:3px solid #fbbf24;outline-offset:2px}