/* Page « In situ » — complément à site.css et cas-agents.css
   Cartes « verre » identiques aux cartes translucides du site
   (recette de .sovereignty-grid .card : rgba(255,255,255,.07) + blur + bord doré),
   en conservant les bandeaux colorés par secteur. */

/* ---- Sections sur canopée : on neutralise le panneau crème de site.css
       (section > .container) pour que les cartes verre donnent sur la forêt ---- */
.architecture-section > .container,
.insitu-section > .container{
  background:transparent!important;box-shadow:none!important;border:0!important;
}
.architecture-section .section-head .kicker,
.insitu-section .section-head .kicker{color:var(--gold)}
.architecture-section .section-head h2,
.insitu-section .section-head h2{color:var(--offwhite)}
.architecture-section .section-head p,
.insitu-section .section-head p{color:#dfeadd}

/* ---- Schéma d'orchestration radial (panneau verre) ---- */
.schema-map{
  padding:1.6rem 1.4rem;
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,200,61,.35)!important;
  backdrop-filter:blur(4px);
}
.schema-map svg{display:block;width:100%;height:auto;max-width:960px;margin:0 auto}

/* ---- En-tête de section In situ ---- */
.insitu-section{scroll-margin-top:112px}
.insitu-section .section-head{max-width:820px}

/* ---- Grille de cartes secteurs ---- */
.insitu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:2rem}

/* Carte verre : même fond que les cartes translucides du site */
.sector-card{
  display:flex;flex-direction:column;color:var(--offwhite);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,200,61,.35);
  border-radius:22px 6px 22px 6px;
  box-shadow:0 20px 50px rgba(4,20,13,.35);
  backdrop-filter:blur(4px);
  overflow:hidden;
}

/* En-tête coloré de la carte (dégradés par secteur, comme la 1re version) */
.sc-head{
  display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:start;
  padding:1.5rem 1.6rem;color:#fff;
  background:linear-gradient(132deg,#092f27,#0e4b38);
}
.sc-card-btp    .sc-head{background:linear-gradient(132deg,#092f27,#0e4b38)}
.sc-card-mairie .sc-head{background:linear-gradient(132deg,#17243d,#244660)}
.sc-card-sante  .sc-head{background:linear-gradient(132deg,#0a3b34,#12665a)}
.sc-card-transport .sc-head{background:linear-gradient(132deg,#1d2a1c,#3a5a2c)}
.sc-card-compta .sc-head{background:linear-gradient(132deg,#241d3a,#463a6a)}

.sc-sector{display:block;color:var(--gold);font-size:.68rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase;margin-bottom:.45rem}
.sc-head h3{margin:0;color:#fff;font-size:1.24rem;line-height:1.22}
.sc-promise{text-align:right;justify-self:end;max-width:140px}
.sc-promise b{display:block;font-family:var(--font-head);color:var(--gold);font-size:1.5rem;line-height:1;white-space:nowrap}
.sc-promise small{display:block;color:#d5e4da;font-size:.64rem;letter-spacing:.04em;margin-top:.25rem;line-height:1.3;white-space:normal}

/* Micro-histoire : même esprit que la hero-note du site (voile sombre + filet or) */
.sc-story{
  margin:0;padding:1rem 1.6rem;
  background:rgba(4,20,13,.35);
  border-left:4px solid var(--gold);
  border-bottom:1px solid rgba(255,200,61,.18);
  color:#ece7d6;font-size:.9rem;font-style:italic;
}
.sc-story b{font-style:normal;color:var(--gold)}

/* Corps : le verre de la carte reste visible */
.sc-body{padding:1.3rem 1.6rem 1.5rem;display:flex;flex-direction:column;gap:1rem;flex:1}

/* Chaîne d'actions (flux) — puces colorées */
.sc-flow{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.sc-flow .step{
  padding:.34rem .7rem;border-radius:999px;font-size:.74rem;font-weight:650;
  background:rgba(255,255,255,.1);border:1px solid rgba(154,215,181,.4);color:#eef3ec;
}
.sc-flow .step.trigger{border-color:var(--gold);color:var(--gold);background:rgba(255,200,61,.12)}
.sc-flow .step.human{background:var(--gold);border-color:var(--gold-dark);color:var(--navy);font-weight:850}
.sc-flow .step.result{background:rgba(61,139,104,.45);border-color:#7ec9a1;color:#d7f2e1;font-weight:800}
.sc-flow .sep{color:var(--gold);font-weight:800;font-size:.85rem}

/* Mesures indicatives — tuiles navy (comme la 1re version) */
.sc-measures{display:flex;flex-wrap:wrap;gap:.6rem}
.sc-measures .m{
  flex:1 1 auto;padding:.55rem .8rem;border-radius:10px;min-width:130px;
  background:var(--navy);color:#fff;box-shadow:0 8px 20px rgba(4,20,13,.3);
}
.sc-measures .m small{display:block;color:var(--gold);font-size:.58rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase;margin-bottom:.1rem}
.sc-measures .m b{font-family:var(--font-head);font-size:1.02rem;font-weight:700}

/* Détail dépliable des processus */
.sc-more{border-top:1px solid rgba(255,200,61,.25);margin-top:.2rem}
.sc-more summary{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.7rem .1rem;cursor:pointer;list-style:none;
  color:var(--gold);font-weight:750;font-size:.82rem;
}
.sc-more summary::-webkit-details-marker{display:none}
.sc-more summary:after{content:"+";display:grid;place-items:center;width:26px;height:26px;border:1px solid rgba(255,200,61,.55);border-radius:50%;color:var(--gold);font-size:1.05rem}
.sc-more[open] summary:after{content:"−";background:var(--gold);color:var(--navy);border-color:var(--gold)}
.sc-more ul{margin:.2rem 0 .8rem;padding:0;list-style:none;display:grid;gap:.5rem}
.sc-more li{padding:.55rem .75rem;background:rgba(4,20,13,.35);border-left:3px solid var(--leaf,#3d8b68);border-radius:0 8px 8px 0;color:#e2ebe2;font-size:.8rem}
.sc-more li b{color:var(--gold)}

/* Note transverse + légende d'architecture (voile sombre + filet or, lisibles) */
.insitu-note{
  max-width:900px;margin:1.6rem auto 0;padding:.85rem 1.1rem;
  border-left:4px solid var(--gold);background:rgba(4,20,13,.35);border-radius:0 12px 12px 0;
  font-size:.86rem;color:#e2ddca;backdrop-filter:blur(3px);
}
.insitu-note strong{color:var(--gold)}
.architecture-section .architecture-caption{background:rgba(4,20,13,.35)!important;color:#ece7d6!important;backdrop-filter:blur(3px)}
.architecture-section .architecture-caption strong{color:var(--gold)}

@media (max-width:900px){
  .insitu-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .sc-head{grid-template-columns:1fr}
  .sc-promise{text-align:left}.sc-promise small{max-width:none}
  .sc-measures .m{flex:1 1 100%}
}