.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Couverture : dérivé WebP local, jamais le JPEG WordPress original. */
.hero{background-image:linear-gradient(90deg,rgba(18,18,18,.82),rgba(18,18,18,.5) 56%,rgba(18,18,18,.12)),url('/assets/images/gallery/details/41-img_2204.webp')}

/* Navigation mobile : les liens ne disparaissent plus sans alternative. */
.nav-toggle{display:none;width:42px;height:42px;padding:0;border:1px solid #ddd6ce;border-radius:6px;background:#fff;color:var(--ink);font-size:1.45rem;line-height:1;cursor:pointer}
.nav-toggle:hover,.nav-toggle:focus-visible{border-color:var(--orange);color:var(--orange);outline:3px solid rgba(226,116,31,.2);outline-offset:2px}

/* Accès métiers de l'accueil : comportement fidèle demandé pour BMH. */
.services .service{display:block;text-align:center;text-decoration:none}
.services .service:nth-child(1),
.services .service:nth-child(3){background:var(--orange);color:#fff}
.services .service:nth-child(2),
.services .service:nth-child(4){background:#fff;color:var(--ink)}
.services .service:nth-child(1):hover,
.services .service:nth-child(1):focus-visible,
.services .service:nth-child(3):hover,
.services .service:nth-child(3):focus-visible{background:var(--orange-dark);color:#fff}
.services .service:nth-child(2):hover,
.services .service:nth-child(2):focus-visible,
.services .service:nth-child(4):hover,
.services .service:nth-child(4):focus-visible{background:#f8e8dc;color:var(--ink)}

/* Les ancres de /competences/ et /devis/ doivent rester visibles sous le header sticky. */
.category-card[id],#services,.realisation-group[id],.realisation-tile[id]{scroll-margin-top:110px}

/* Page compétences : rythme discret, un bloc sur deux reçoit seulement 3,5 % d'orange. */
.category-grid .category-card:nth-child(even){background:rgba(226,116,31,.035)}

/* Actions au bas de chaque compétence. */
.category-actions{display:flex;gap:.65rem;flex-wrap:wrap;align-items:center;margin-top:1.15rem}
.button-secondary{background:transparent;color:var(--orange)}
.button-secondary:hover,.button-secondary:focus-visible{background:#f8e8dc;border-color:var(--orange-dark);color:var(--orange-dark)}
.service-prefill-note{margin:.1rem 0 .55rem;padding:.7rem .8rem;border-left:4px solid var(--orange);background:#fff7f0}
.form-error{margin:.45rem 0 0;color:#9a2f1f;font-size:.86rem;font-weight:800}
.field-error{padding:.7rem!important;border:2px solid #b73f2b!important;border-radius:7px!important;background:#fff8f6}

/* Vignettes réalisations : petits tirages carrés légèrement empilés. */
.gallery-stacks{gap:1.8rem 1.45rem;align-items:start}
.realisation-group{margin-top:3.4rem}
.realisation-group:first-of-type{margin-top:1.5rem}
.realisation-group-head{display:flex;justify-content:space-between;gap:1rem;align-items:end;margin-bottom:1.3rem;border-bottom:1px solid #e7ded5;padding-bottom:.8rem}
.realisation-group-head h2{margin:0;font-size:clamp(1.7rem,4vw,2.6rem)}
.realisation-group-head small{color:var(--muted);font-weight:800}
.realisation-tile{min-width:0;margin:0;padding:.35rem .35rem 1rem}
.realisation-card{position:relative;display:block;width:100%;aspect-ratio:1;border:0;padding:0;background:#fff;cursor:zoom-in;isolation:isolate;box-shadow:0 12px 30px rgba(32,26,21,.12)}
.realisation-card::before,.realisation-card::after{content:"";position:absolute;inset:7px;background:#fff;border:1px solid #e5ddd4;z-index:-2;transition:transform .22s ease,box-shadow .22s ease}
.realisation-card::before{transform:translate(8px,-7px) rotate(2.1deg)}
.realisation-card::after{transform:translate(-7px,8px) rotate(-1.7deg);z-index:-1}
.realisation-card img{position:relative;z-index:1;width:100%;height:100%;aspect-ratio:1;object-fit:cover;transition:transform .25s ease,filter .25s ease}
.realisation-card:hover img,.realisation-card:focus-visible img{transform:scale(1.045);filter:saturate(1.04)}
.realisation-card:hover::before,.realisation-card:focus-visible::before{transform:translate(11px,-9px) rotate(2.8deg);box-shadow:0 9px 18px rgba(30,24,20,.1)}
.realisation-card:hover::after,.realisation-card:focus-visible::after{transform:translate(-10px,10px) rotate(-2.3deg)}
.realisation-card:focus-visible{outline:4px solid rgba(226,116,31,.35);outline-offset:7px}
.realisation-stack{display:none}
.realisation-zoom{position:absolute;z-index:3;right:.7rem;bottom:.7rem;width:2.2rem;height:2.2rem;display:grid;place-items:center;border-radius:50%;background:rgba(25,25,25,.72);color:#fff;font-size:1.45rem;line-height:1;opacity:.82;transition:transform .2s ease,background .2s ease}
.realisation-card:hover .realisation-zoom,.realisation-card:focus-visible .realisation-zoom{transform:scale(1.08);background:var(--orange)}
.realisation-tile figcaption{display:flex;justify-content:space-between;gap:.8rem;align-items:baseline;padding:.85rem .15rem 0}
.realisation-tile figcaption strong{font-size:1rem}
.realisation-tile figcaption span{font-size:.75rem;color:var(--muted)}

/* Agrandissement natif et léger, sans bibliothèque externe. */
.image-dialog{width:min(1080px,calc(100vw - 2rem));max-height:calc(100vh - 2rem);padding:0;border:0;background:#111;box-shadow:0 30px 90px rgba(0,0,0,.5);overflow:hidden}
.image-dialog::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(2px)}
.image-dialog img{display:block;max-width:100%;max-height:calc(100vh - 2rem);width:auto;height:auto;margin:auto;object-fit:contain}
.image-dialog-close{position:absolute;z-index:5;top:.65rem;right:.65rem;width:2.7rem;height:2.7rem;border:0;border-radius:50%;background:rgba(20,20,20,.78);color:#fff;font-size:1.8rem;line-height:1;cursor:pointer}
.image-dialog-close:hover,.image-dialog-close:focus-visible{background:var(--orange);outline:3px solid #fff;outline-offset:2px}

/* Carrousel d'images de l'accueil. */
.home-carousel{position:relative;max-width:960px;margin:0 auto;outline:none}
.carousel-viewport{overflow:hidden;background:#111;box-shadow:0 18px 48px rgba(0,0,0,.28)}
.carousel-track{display:flex;transition:transform .55s ease;will-change:transform}
.carousel-slide{flex:0 0 100%;min-width:100%;position:relative}
.carousel-slide>a{display:block;position:relative;color:#fff;text-decoration:none}
.carousel-slide img{width:100%;height:clamp(300px,56vw,590px);object-fit:cover}
.carousel-slide>a:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.78))}
.carousel-caption{position:absolute;z-index:2;left:clamp(1rem,4vw,2.4rem);right:clamp(1rem,4vw,2.4rem);bottom:clamp(1rem,4vw,2.2rem);display:grid;gap:.18rem}
.carousel-caption small{color:#ffd3b5;font-weight:900;text-transform:uppercase;letter-spacing:.1em}
.carousel-caption strong{font-size:clamp(1.25rem,3vw,2rem)}
.carousel-arrow{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:48px;height:48px;border:2px solid rgba(255,255,255,.9);border-radius:50%;background:rgba(20,20,20,.58);color:#fff;font-size:2rem;line-height:1;display:grid;place-items:center;cursor:pointer}
.carousel-arrow:hover,.carousel-arrow:focus-visible{background:var(--orange);outline:3px solid rgba(255,255,255,.45);outline-offset:3px}
.carousel-prev{left:1rem}.carousel-next{right:1rem}
.carousel-dots{display:flex;justify-content:center;gap:.55rem;margin-top:1rem}
.carousel-dots button{width:12px;height:12px;padding:0;border:2px solid #fff;border-radius:50%;background:transparent;cursor:pointer}
.carousel-dots button.active{background:var(--orange);border-color:var(--orange)}
.carousel-dots button:focus-visible{outline:3px solid rgba(226,116,31,.45);outline-offset:3px}
.carousel-footer{text-align:center;margin-top:1.5rem}

@media(max-width:900px){
  .nav{position:relative;gap:.8rem}
  .nav-toggle{display:grid;place-items:center;flex:0 0 auto}
  .nav-links{display:none;position:absolute;z-index:50;top:calc(100% + 1px);left:0;right:0;padding:.55rem;background:#fff;border:1px solid #e8e1da;box-shadow:0 14px 32px rgba(30,25,20,.16)}
  .nav-links.is-open{display:grid}
  .nav-links a{padding:.8rem .9rem;border-radius:5px}
  .nav-links a:hover,.nav-links a:focus-visible{background:#f8e8dc;color:var(--orange-dark);outline:none}
}

@media(max-width:620px){
  .hero{background-image:linear-gradient(90deg,rgba(18,18,18,.82),rgba(18,18,18,.5) 56%,rgba(18,18,18,.12)),url('/assets/images/gallery/thumbs/41-img_2204.webp')}
  .nav{gap:.5rem}
  .nav-toggle{width:38px;height:38px;font-size:1.25rem}
  .nav-quote{white-space:nowrap}
  /* Mobile : carrés 1 et 4 orange, carrés 2 et 3 blancs. */
  .services .service:nth-child(1),
  .services .service:nth-child(4){background:var(--orange);color:#fff}
  .services .service:nth-child(2),
  .services .service:nth-child(3){background:#fff;color:var(--ink)}
  .services .service:nth-child(1):hover,
  .services .service:nth-child(1):focus-visible,
  .services .service:nth-child(4):hover,
  .services .service:nth-child(4):focus-visible{background:var(--orange-dark);color:#fff}
  .services .service:nth-child(2):hover,
  .services .service:nth-child(2):focus-visible,
  .services .service:nth-child(3):hover,
  .services .service:nth-child(3):focus-visible{background:#f8e8dc;color:var(--ink)}
  .category-card[id],#services,.realisation-group[id],.realisation-tile[id]{scroll-margin-top:92px}
  .category-actions{align-items:stretch;flex-direction:column}
  .category-actions .button{width:100%}
  .carousel-arrow{width:42px;height:42px}
  .carousel-prev{left:.55rem}.carousel-next{right:.55rem}
  .realisation-tile{padding:.4rem .75rem 1rem}
  .realisation-tile figcaption{padding-top:.75rem}
  .realisation-group-head{align-items:start;flex-direction:column;gap:.25rem}
}

@media(prefers-reduced-motion:reduce){
  .carousel-track,.realisation-card img,.realisation-card::before,.realisation-card::after,.realisation-zoom{transition:none}
}
