/* Ajustements UX demandés pour la prévisualisation BMH. */

/* Accueil : sur ordinateur large, une carte métier sur deux est colorée,
   dans l'ordre de lecture : blanc / orange / blanc / orange. */
.services .service:nth-child(odd){background:#fff;color:var(--ink)}
.services .service:nth-child(even){background:var(--orange);color:#fff}
.services .service:nth-child(odd):hover,
.services .service:nth-child(odd):focus-visible{background:#f8e8dc;color:var(--ink)}
.services .service:nth-child(even):hover,
.services .service:nth-child(even):focus-visible{background:var(--orange-dark);color:#fff}

/* Arrivée par ancre : le bloc visé se détache nettement sans masquer son contenu. */
.category-card:target,
.realisation-group:target,
.form-section:target{
  position:relative;
  z-index:3;
  box-shadow:0 0 0 4px rgba(226,116,31,.18),0 22px 58px rgba(48,31,18,.24);
  animation:bmh-anchor-spotlight 1.15s ease-out both;
}
.category-card:target::after,
.realisation-group:target::after,
.form-section:target::after{
  content:"";
  position:absolute;
  inset:-7px;
  border:2px solid rgba(226,116,31,.56);
  border-radius:inherit;
  pointer-events:none;
}
@keyframes bmh-anchor-spotlight{
  0%{transform:translateY(5px);filter:brightness(1.05)}
  45%{transform:translateY(-2px);filter:brightness(1.02)}
  100%{transform:none;filter:none}
}

/* Réalisations : catégories successives et cartes volontairement un peu mélangées.
   Les rotations restent faibles pour garder la photo lisible. */
.realisation-groups{display:grid;gap:4.4rem}
.realisation-group{scroll-margin-top:112px}
.realisation-group-head{position:relative;z-index:1;display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.2rem;padding-bottom:.85rem;border-bottom:1px solid #e2d9cf}
.realisation-group-head h2{margin:.2rem 0 0;font-size:clamp(1.8rem,4vw,2.8rem)}
.realisation-group-head p{max-width:540px;margin:0;color:var(--muted)}
.realisation-count{flex:0 0 auto;padding:.35rem .62rem;border-radius:999px;background:#fff;color:var(--muted);font-size:.76rem;font-weight:900;box-shadow:0 5px 15px rgba(35,28,21,.08)}
.realisation-deck{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem .2rem;padding:1rem .75rem 1.8rem;isolation:isolate;overflow:visible}
.realisation-deck .realisation-tile{position:relative;z-index:1;margin:0 -7px;padding:.25rem;transform-origin:50% 78%;transition:transform .2s ease,z-index 0s,filter .2s ease}
.realisation-deck .realisation-tile:nth-child(6n+1){transform:rotate(-2.1deg) translateY(7px);z-index:2}
.realisation-deck .realisation-tile:nth-child(6n+2){transform:rotate(1.6deg) translateY(-3px);z-index:4}
.realisation-deck .realisation-tile:nth-child(6n+3){transform:rotate(-.8deg) translateY(4px);z-index:3}
.realisation-deck .realisation-tile:nth-child(6n+4){transform:rotate(2.2deg) translateY(-5px);z-index:5}
.realisation-deck .realisation-tile:nth-child(6n+5){transform:rotate(-1.4deg) translateY(-1px);z-index:2}
.realisation-deck .realisation-tile:nth-child(6n){transform:rotate(1deg) translateY(6px);z-index:4}
.realisation-deck .realisation-tile:hover,
.realisation-deck .realisation-tile:focus-within{
  z-index:40;
  transform:translateY(-16px) rotate(0) scale(1.08);
  filter:none;
}
.realisation-deck .realisation-card{
  border-radius:4px;
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 14px 34px rgba(32,26,21,.18);
  transition:box-shadow .2s ease,transform .2s ease;
}
.realisation-deck .realisation-tile:hover .realisation-card,
.realisation-deck .realisation-tile:focus-within .realisation-card{
  box-shadow:0 30px 70px rgba(27,20,15,.31);
}
.realisation-deck .realisation-tile figcaption{padding:.75rem .3rem .2rem;background:rgba(247,244,239,.95)}
.realisation-category-chip{position:absolute;z-index:4;top:.7rem;left:.7rem;padding:.3rem .52rem;border-radius:999px;background:rgba(25,25,25,.8);color:#fff;font-size:.65rem;font-weight:950;text-transform:uppercase;letter-spacing:.06em;pointer-events:none}
.realisation-card-help{margin:.4rem 0 0;color:var(--muted);font-size:.82rem}

/* Compétences : vrai damier en 2 colonnes. Les cartes 1/4 et 2/3 sont opposées,
   ce qui évite deux cases de même teinte l'une sous l'autre sur petit écran PC. */
.category-grid .category-card:nth-child(1),
.category-grid .category-card:nth-child(4){background:#fff}
.category-grid .category-card:nth-child(2),
.category-grid .category-card:nth-child(3){background:rgba(226,116,31,.055)}

/* Formulaires : chaque famille d'informations devient une carte distincte. */
.form.form-cards{max-width:980px;gap:1.25rem}
.form-cards-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;align-items:start}
.form-section{position:relative;margin:0;padding:1.35rem;border:1px solid #e2d8ce;border-radius:13px;background:#fff;box-shadow:0 10px 28px rgba(35,28,21,.075)}
.form-section legend{padding:0 .35rem;color:var(--ink);font-size:1rem;font-weight:950}
.form-section-title{display:flex;align-items:center;gap:.65rem;margin:0 0 1rem;font-size:1.05rem;font-weight:950}
.form-section-title::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px rgba(226,116,31,.12)}
.form-section .field+.field{margin-top:.9rem}
.form-section .field input,
.form-section .field textarea,
.form-section .field select{border:1px solid #d6cdc3;background:#fdfcfb;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.form-section .field input:focus,
.form-section .field textarea:focus,
.form-section .field select:focus{outline:none;border-color:var(--orange);background:#fff;box-shadow:0 0 0 4px rgba(226,116,31,.12)}
.form-section-services{background:#fffaf6}
.service-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.service-choice{display:flex;align-items:flex-start;gap:.55rem;padding:.75rem;border:1px solid #eadfd4;border-radius:9px;background:#fff;font-weight:750;cursor:pointer}
.service-choice:has(input:checked){border-color:var(--orange);background:#fff3e9;box-shadow:0 0 0 2px rgba(226,116,31,.1)}
.form-consent{display:flex;align-items:flex-start;gap:.7rem;padding:1rem 1.15rem;border:1px solid #e1d7cd;border-radius:11px;background:#f4f0eb}
.form-consent input{margin-top:.28rem;flex:0 0 auto}
.form-submit-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:.2rem}
.contact-intro-card{padding:1.45rem;border-left:6px solid var(--orange);border-radius:9px;background:#fff;box-shadow:0 10px 30px rgba(35,28,21,.08)}

@media(max-width:900px){
  /* Dès que les services passent en 2 colonnes : rangée 1 blanc/orange,
     rangée 2 orange/blanc. */
  .services .service:nth-child(1),
  .services .service:nth-child(4){background:#fff;color:var(--ink)}
  .services .service:nth-child(2),
  .services .service:nth-child(3){background:var(--orange);color:#fff}
  .realisation-deck{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem .15rem}
  .form-cards-grid{grid-template-columns:1fr}
  /* En une seule colonne, on revient à une alternance stricte verticale. */
  .category-grid .category-card:nth-child(odd){background:#fff}
  .category-grid .category-card:nth-child(even){background:rgba(226,116,31,.055)}
}

@media(max-width:700px){
  .realisation-deck{grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:.2rem}
  .realisation-deck .realisation-tile{margin:0 -3px}
  .service-choice-grid{grid-template-columns:1fr}
  .realisation-group-head{align-items:flex-start;flex-direction:column}
}

@media(max-width:620px){
  /* Mobile étroit : conserver l'alternance déjà retenue 1 et 4 orange. */
  .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)}
  .realisation-deck{display:grid;grid-template-columns:1fr;gap:1rem;padding:.2rem}
  .realisation-deck .realisation-tile,
  .realisation-deck .realisation-tile:nth-child(n){margin:0;transform:none;z-index:1}
  .realisation-deck .realisation-tile:hover,
  .realisation-deck .realisation-tile:focus-within{transform:none;z-index:1}
  .form-section{padding:1.05rem}
  .form-submit-row{align-items:stretch;flex-direction:column}
  .form-submit-row .button{width:100%}
}

@media(prefers-reduced-motion:reduce){
  .category-card:target,.realisation-group:target,.form-section:target{animation:none}
  .realisation-deck .realisation-tile{transition:none}
}