/* Bloc contact CBS — référence 2026-10-31
   Variante 4 bis (Achille) + charte 30/10.
   Classes préfixées cbs-bc- pour coller sans écraser le CSS du site.
   Ne touche PAS aux formulaires (action, champs, anti-spam). */

.cbs-bc {
  --cbs-navy: #003366;
  --cbs-navy-foot: #092142;
  --cbs-green: #1C8048;
  --cbs-green-hover: #166A3B;
  --cbs-trait: #5BC889;
  --cbs-text: #0F1F33;
  --cbs-intro: #6B7280;
  --cbs-line: #E2E8F0;
  --cbs-white: #FFFFFF;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--cbs-text);
}

.cbs-bc *,
.cbs-bc *::before,
.cbs-bc *::after {
  box-sizing: border-box;
}

/* —— Section compacte (bas de page, avant le footer) —— */
.cbs-bc-section {
  background: var(--cbs-white);
  padding: 28px 0 32px;
}

.cbs-bc-section .cbs-bc-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

.cbs-bc-panel {
  max-width: 420px;
}

/* —— Titre devis (pages devis / panneau bas de page) —— */
.cbs-bc-title {
  margin: 0 0 12px;
  font-size: clamp(26px, 3.2vw, 30px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--cbs-navy);
}

/* Pas de trait vert sous le titre (règle 4 bis) */
.cbs-bc-title::after {
  content: none !important;
  display: none !important;
}

.cbs-bc-intro {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cbs-intro);
}

/* cbs-emballages : surpasser .cbs-lead sur l’intro du bloc */
.cbs-bc p.cbs-lead.cbs-bc-intro,
.cbs-bc .cbs-bc-intro {
  color: var(--cbs-intro) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 0 22px !important;
  max-width: none !important;
}


/* —— « Nous joindre : » —— */
.cbs-bc-joindre {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cbs-navy);
}

.cbs-bc-joindre::after {
  content: none !important;
  display: none !important;
}

/* —— Coordonnées —— */
.cbs-bc-coords {
  margin: 0;
  padding: 0;
}

.cbs-bc-coords dt {
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--cbs-green);
}

.cbs-bc-coords dd {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--cbs-navy);
}

.cbs-bc-coords dd a {
  color: var(--cbs-navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.cbs-bc-coords dd a:hover,
.cbs-bc-coords dd a:focus-visible {
  color: var(--cbs-green);
}

.cbs-bc-note {
  font-weight: 400;
  color: var(--cbs-intro);
}

/* —— Bouton RDV — fond blanc (pages contact / devis / bloc bas) —— */
.cbs-bc-rdv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  min-height: 48px;
  padding: 16px 40px;
  border: none;
  border-radius: 6px;
  background: var(--cbs-green);
  color: var(--cbs-white) !important;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
}

.cbs-bc-rdv:hover,
.cbs-bc-rdv:focus-visible {
  background: var(--cbs-green-hover);
  color: var(--cbs-white) !important;
}

.cbs-bc-rdv:focus-visible {
  outline: 2px solid var(--cbs-navy);
  outline-offset: 3px;
}

/* —— Variante fond bleu (section déjà marine) ——
   Ajouter .cbs-bc--bleu sur .cbs-bc ou sur la section. */
.cbs-bc--bleu,
.cbs-bc.cbs-bc--bleu .cbs-bc-section {
  background: var(--cbs-navy);
}

.cbs-bc--bleu .cbs-bc-title,
.cbs-bc--bleu .cbs-bc-joindre,
.cbs-bc--bleu .cbs-bc-coords dd,
.cbs-bc--bleu .cbs-bc-intro {
  color: var(--cbs-white);
}

.cbs-bc--bleu .cbs-bc-intro {
  color: rgba(255, 255, 255, 0.85);
}

.cbs-bc--bleu .cbs-bc-coords dt {
  color: var(--cbs-trait); /* #5BC889 lisible sur bleu */
}

.cbs-bc--bleu .cbs-bc-coords dd a {
  color: var(--cbs-white);
  text-decoration-color: var(--cbs-white);
}

.cbs-bc--bleu .cbs-bc-coords dd a:hover,
.cbs-bc--bleu .cbs-bc-coords dd a:focus-visible {
  color: var(--cbs-trait);
  text-decoration-color: var(--cbs-trait);
}

.cbs-bc--bleu .cbs-bc-note {
  color: rgba(255, 255, 255, 0.7);
}

/* Bouton RDV type pied de page : transparent, contour blanc */
.cbs-bc--bleu .cbs-bc-rdv {
  background: transparent;
  color: var(--cbs-white) !important;
  border: 2px solid var(--cbs-white);
  border-radius: 5px;
  padding: 11px 22px;
  font-size: 15px;
}

.cbs-bc--bleu .cbs-bc-rdv:hover,
.cbs-bc--bleu .cbs-bc-rdv:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: var(--cbs-white) !important;
}

/* —— Page contact pure : pas de titre devis ni d’intro devis ——
   Utiliser uniquement .cbs-bc-joindre + coords + bouton. */

/* —— Démo référence (fichier bloc.html seulement) —— */
.cbs-bc-demo-page {
  margin: 0;
  background: #F5F7FA;
  color: var(--cbs-text);
}

.cbs-bc-demo-bar {
  background: var(--cbs-navy-foot);
  color: #fff;
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.cbs-bc-demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 960px;
  margin: 28px auto;
  padding: 0 20px 40px;
}

.cbs-bc-demo-card {
  border: 1px solid var(--cbs-line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.cbs-bc-demo-card > h3 {
  margin: 0;
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5A6B7D;
  background: #F8FAFC;
  border-bottom: 1px solid var(--cbs-line);
}

.cbs-bc-demo-card .cbs-bc-panel {
  padding: 28px 32px 32px;
  max-width: none;
}

.cbs-bc-demo-card.cbs-bc--bleu .cbs-bc-panel {
  background: var(--cbs-navy);
}

@media (max-width: 720px) {
  .cbs-bc-demo-grid {
    grid-template-columns: 1fr;
  }
}

/* Anciens bandeaux CTA remplacés par .cbs-bc-section */
section[data-testid="v8-cta"],
section[data-testid="p8-cta"]{display:none!important}