/* ==========================================================================
   SECTORWEB — passerelle blocs Gutenberg ↔ design « Blueprint »
   Le contenu de la home est en blocs natifs éditables. Les composants du
   design attendaient un balisage précis ; ces règles rétablissent le rendu
   sur la sortie des blocs, et remplacent par du CSS les caractères
   décoratifs qui étaient écrits en dur dans la maquette (→ ✓ + i •).
   ========================================================================== */

/* ---------- resets de la bibliothèque de blocs ---------- */
.wp-block-group{ min-width:0 }
.wp-block-list{ list-style:none; padding-left:0; margin:0 }
.wp-block-separator.rule{
  border:0; border-top:1px solid var(--gridline);
  margin:0; height:0; opacity:1; max-width:none;
}
.wp-block-heading{ margin:0 }

/* ---------- boutons ---------- */
.wp-block-buttons.row{ display:flex; gap:10px; flex-wrap:wrap }
.hero-c .wp-block-buttons.row,
.hero-edit .wp-block-buttons.row{ justify-content:center }
.hero-edit .wp-block-buttons.row{ margin-top:30px }
.wp-block-button__link{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; font-weight:500; letter-spacing:.01em;
  padding:10px 18px; border-radius:var(--r-pill);
  transition:background .16s,box-shadow .16s,color .16s; white-space:nowrap;
}
.wp-block-button.is-style-primary .wp-block-button__link{
  background:var(--ember); color:#fff; box-shadow:var(--sh-glow);
}
.wp-block-button.is-style-primary .wp-block-button__link:hover{ background:#e64500; color:#fff }
.wp-block-button.is-style-ghost .wp-block-button__link{
  background:var(--canvas); color:var(--ink); border:1px solid var(--gridline);
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover{ border-color:var(--stone); color:var(--ink) }
.wp-block-button.btn-lg .wp-block-button__link{ padding:13px 24px; font-size:15px }
/* la flèche était un <span class="arw"> dans la maquette */
.wp-block-button.is-style-primary .wp-block-button__link::after{ content:"→"; font-family:var(--f-mono) }

/* ---------- bandeau de chiffres ---------- */
.statband > .st{ padding:32px 24px; border-right:1px solid var(--gridline) }
.statband > .st:last-child{ border-right:0 }

/* ---------- encart ---------- */
.callout{ align-items:start }
.callout::before{
  content:"i"; width:28px; height:28px; border-radius:var(--r-pill);
  background:var(--canvas); border:1px solid var(--gridline); color:var(--ember);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:13px; flex-shrink:0;
}

/* ---------- pile de garanties ---------- */
.d-stack li{
  display:flex; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:12px; color:var(--slate);
}
.d-stack li::before{
  content:"✓"; width:15px; height:15px; border-radius:var(--r-pill);
  background:var(--ember-glow); color:var(--ember);
  display:flex; align-items:center; justify-content:center;
  font-size:9px; flex-shrink:0;
}

/* ---------- communes ---------- */
.zones > li{ display:block }
.zones > li > a{
  background:var(--canvas); padding:18px 20px; font-size:14.5px; color:var(--ink);
  transition:background .15s; display:flex; align-items:center; justify-content:space-between;
  gap:10px; height:100%;
}
/* flèche ajoutée seulement quand la maquette n'avait pas de libellé dans .ar */
.zones > li > a:not(:has(.ar))::after{ content:"→"; font-family:var(--f-mono); font-size:11px; color:var(--stone) }
.zones > li > a .ar{ font-family:var(--f-mono); font-size:11px; color:var(--stone) }
.zones > li > a:hover .ar{ color:var(--ember) }
.zones > li > a:hover{ background:var(--vellum); color:var(--ember) }
.zones > li > a:hover::after{ color:var(--ember) }

/* ---------- villes ---------- */
.channels > .ch{
  padding:24px 20px; border-right:1px solid var(--gridline);
  display:flex; flex-direction:column; gap:9px; transition:background .15s;
}
.channels > .ch:last-child{ border-right:0 }
.channels > .ch:hover{ background:var(--vellum) }
.channels .vl a{ color:inherit }

/* ---------- avis ---------- */
.revc .who{
  display:grid; grid-template-columns:32px 1fr; grid-template-rows:auto auto;
  column-gap:10px; align-items:center; margin-top:auto;
}
.revc .who .av{ grid-row:1 / span 2; align-self:center }
.revc .who .nm{ grid-column:2; align-self:end }
.revc .who .src{ grid-column:2; align-self:start }

/* ---------- méthode ---------- */
.numlist .it .bd > * + *{ margin-top:8px }

/* ---------- FAQ ---------- */
details.qa summary::after{
  content:"+"; font-family:var(--f-mono); font-size:15px; color:var(--slate);
  flex-shrink:0; transition:color .18s;
}
details.qa[open] summary::after{ content:"−"; color:var(--ember) }
details.qa summary::marker{ content:"" }

/* ---------- badge du CTA ---------- */
.cta-band .badge::before{
  content:""; width:5px; height:5px; border-radius:var(--r-pill);
  background:var(--ember); flex-shrink:0;
}

/* ---------- formules ---------- */
/* La maquette posait .plan .btn{width:100%} sur un <a> ; le bloc bouton ajoute
   deux niveaux d'emballage, et sans margin-top:auto les cartes d'une même
   rangée n'alignent plus leur appel à l'action. */
.plan .wp-block-buttons{ margin-top:auto }
.plan .wp-block-button,
.plan .wp-block-button__link{ width:100% }

/* ---------- cartes services ---------- */
/* La carte était un <a> englobant ; c'est maintenant un groupe éditable,
   rendu cliquable en entier par assets/js/site.js. */
.svcx{ cursor:pointer; transition:border-color .15s, box-shadow .15s }
.svcx:hover{ border-color:var(--stone); box-shadow:var(--sh-card) }
.svcx .go a{ color:inherit }
.svcx:hover .go a{ color:var(--ember) }

/* ---------- tableau comparatif ---------- */
/* Les cellules sont des groupes contenant un paragraphe : la maquette visait
   un span (.cmp .r > div span.sm), on cible aussi le paragraphe. */
.cmp .r .sm{ color:var(--graphite) }
.cmp .r > div > p{ margin:0 }