/* ------------------------------------------------------------------
   Factur-e — feuille du site vitrine
   Évolution 01 « ouverture publique ».

   Tokens repris de la charte du dépôt :
   src/factur-e/docs/design/preview/charte-graphique-standalone.html
   Aucune couleur, aucun rayon n'est inventé.

   Écart assumé (validé Bruno, trace 2026-08-22) : l'échelle d'affichage
   (56 / 32 / 17 px) sort de l'échelle de la charte, qui s'arrête à 48 px.
   C'est une échelle propre au site vitrine, distincte de l'application.

   Ce fichier est AJOUTÉ. css.css et satoshi.css ne sont pas modifiés,
   et ne sont pas chargés par les pages de cette évolution.
   ------------------------------------------------------------------ */

/* --- Satoshi, famille unifiée (poids) --------------------------------
   La maquette compose en `font-family:'Satoshi'` + `font-weight`.
   satoshi.css, lui, déclare des familles séparées (Satoshi-Regular…).
   On déclare ici les deux formes : la famille à poids pour le site, et
   les alias hérités dont le bloc Brevo se sert dans ses styles en ligne
   — le code Brevo reste ainsi repris verbatim.                        */

@font-face { font-family: 'Satoshi'; src: url('assets/fonts/Satoshi-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('assets/fonts/Satoshi-Italic.woff2')  format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('assets/fonts/Satoshi-Medium.woff2')  format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('assets/fonts/Satoshi-Bold.woff2')    format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: 'Satoshi-Regular'; src: url('assets/fonts/Satoshi-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Satoshi-Medium';  src: url('assets/fonts/Satoshi-Medium.woff2')  format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Satoshi-Bold';    src: url('assets/fonts/Satoshi-Bold.woff2')    format('woff2'); font-weight: 700; font-display: swap; }

/* --- Tokens ---------------------------------------------------------- */

:root {
  --color-primary-50:   #f1f6ee;
  --color-primary-100:  #dde8d6;
  --color-primary-200:  #bcd2af;
  --color-primary-600:  #316128;
  --color-primary-700:  #264c1f;

  --color-neutral-0:    #ffffff;
  --color-neutral-50:   #f8fafc;
  --color-neutral-100:  #f1f5f9;
  --color-neutral-200:  #e2e8f0;
  --color-neutral-300:  #cbd5e1;
  --color-neutral-400:  #94a3b8;
  --color-neutral-500:  #64748b;
  --color-neutral-600:  #475569;
  --color-neutral-700:  #334155;
  --color-neutral-900:  #0f172a;

  /* sémantiques — ajoutés à l'évolution 02 pour les bandeaux du formulaire */
  --color-danger-50:    #fbebed;
  --color-danger-500:   #9a2536;
  --color-danger-700:   #5d1320;
  --color-success-50:   #eff8ec;
  --color-success-500:  #4d9a3f;
  --color-success-700:  #2c5d24;

  --font-family-sans: 'Satoshi', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --radius-md: 6px;
  --radius-sm: 4px;

  --page-max:    1120px;
  --page-narrow: 1000px;
  --page-read:    820px;
  --page-gutter:   32px;
}

/* --- Assise ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-family-sans);
  color: var(--color-neutral-900);
  background: var(--color-neutral-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }
img { max-width: 100%; }

a { color: var(--color-primary-600); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--color-primary-700); text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--color-primary-600); outline-offset: 2px; }

/* --- Structure -------------------------------------------------------- */

.wrap        { max-width: var(--page-max);    margin: 0 auto; padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
.wrap-narrow { max-width: var(--page-narrow); margin: 0 auto; padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
.wrap-read   { max-width: var(--page-read);   margin: 0 auto; padding-left: var(--page-gutter); padding-right: var(--page-gutter); }

.section        { padding-top: 72px; padding-bottom: 72px; scroll-margin-top: 112px; }
.section--alt   { background: var(--color-neutral-50); border-top: 1px solid var(--color-neutral-200); border-bottom: 1px solid var(--color-neutral-200); }
.section--last  { border-bottom: 0; }

.section-head   { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; margin-bottom: 16px; }
.section-head h2 { font-size: 32px; line-height: 1.2; max-width: 640px; }
.section-chapo  { font-size: 18px; line-height: 1.6; color: var(--color-neutral-700); max-width: 720px; margin-bottom: 40px; }

.uptop { font-size: 14px; font-weight: 500; color: var(--color-neutral-500); text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.uptop:hover { color: var(--color-primary-600); }

.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-500); }
.eyebrow--accent { color: var(--color-primary-600); }

/* --- Boutons et liens d'action (zone tactile 44 px mini) -------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px;
  background: var(--color-primary-600); color: var(--color-neutral-0);
  border-radius: var(--radius-md);
  font-size: 15px; font-weight: 500; text-decoration: none;
}
.btn:hover { background: var(--color-primary-700); color: var(--color-neutral-0); text-decoration: none; }
.btn--lg { min-height: 52px; padding: 0 26px; font-size: 17px; }
.btn--md { min-height: 48px; padding: 0 22px; font-size: 16px; }
.btn--sm { min-height: 36px; padding: 0 16px; font-size: 14px; }

.link-action { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; font-weight: 500; color: var(--color-primary-600); }

/* --- En-tête ---------------------------------------------------------- */

.site-header { border-bottom: 1px solid var(--color-neutral-200); background: var(--color-neutral-0); }
.site-header .wrap,
.site-header .wrap-narrow,
.site-header .wrap-read { padding-top: 20px; padding-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--color-neutral-900); }
.brand:hover { color: var(--color-neutral-900); text-decoration: none; }
.brand img { display: block; }
.brand-name { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.brand-stack { display: flex; flex-direction: column; line-height: 1.1; }
.brand-baseline { font-size: 12px; font-weight: 500; color: var(--color-neutral-500); letter-spacing: 0.01em; }

.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--color-neutral-700); }
.site-nav a:hover { color: var(--color-primary-600); }
.site-nav .btn { color: var(--color-neutral-0); }

/* --- Sommaire collant ------------------------------------------------- */

.toc {
  position: sticky; top: 0; z-index: 40;
  margin-top: 56px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-neutral-200);
  border-bottom: 1px solid var(--color-neutral-200);
}
.toc .wrap { padding-top: 10px; padding-bottom: 10px; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 20px; }
.toc-links { display: flex; gap: 20px; align-items: center; min-width: 0; overflow-x: auto; }
.toc-links a { font-size: 14px; font-weight: 500; color: var(--color-neutral-700); text-decoration: none; white-space: nowrap; }
.toc-links a:hover { color: var(--color-primary-600); }

/* --- Accroche --------------------------------------------------------- */

.hero { padding-top: 72px; }
.hero h1 { font-size: 56px; line-height: 1.08; margin-bottom: 24px; }
.hero-chapo { font-size: 21px; line-height: 1.55; color: var(--color-neutral-700); margin-bottom: 20px; }
.hero-chapo strong { font-weight: 700; color: var(--color-neutral-900); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 32px; }
.measure { max-width: 760px; }

.echeance {
  margin-top: 48px; padding: 20px 24px;
  background: var(--color-primary-50);
  border-left: 3px solid var(--color-primary-600);
}
.echeance p { font-size: 15px; line-height: 1.6; color: var(--color-primary-700); }
.echeance strong { font-weight: 700; }

/* --- Grilles de cartes ------------------------------------------------ */

.grid-rule { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1px; background: var(--color-neutral-200); border: 1px solid var(--color-neutral-200); }
.grid-rule > * { background: var(--color-neutral-0); padding: 32px; }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; }
.card { background: var(--color-neutral-0); border: 1px solid var(--color-neutral-200); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.card--lg { padding: 32px; gap: 20px; }

.volet h3 { font-size: 22px; margin-bottom: 12px; }
.volet .eyebrow { display: block; margin-bottom: 12px; }
.volet p { font-size: 17px; line-height: 1.6; color: var(--color-neutral-700); }

/* --- Cas d'usage ------------------------------------------------------ */

.cas-quote { font-size: 19px; line-height: 1.5; font-weight: 500; color: var(--color-neutral-900); }
.cas-answer { border-top: 1px solid var(--color-neutral-200); padding-top: 16px; }
.cas-answer .eyebrow { display: block; margin-bottom: 8px; }
.cas-answer p { font-size: 16px; line-height: 1.6; color: var(--color-neutral-700); }

/* --- Gratuit / tout compris ------------------------------------------ */

.offre { display: flex; flex-direction: column; gap: 18px; }
.offre h3 { font-size: 26px; }
.offre .eyebrow { display: block; margin-bottom: 10px; }
.offre p { font-size: 17px; line-height: 1.6; color: var(--color-neutral-700); }
.offre .precision { font-size: 16px; color: var(--color-neutral-600); font-style: italic; }
.offre .pied { font-size: 16px; line-height: 1.6; color: var(--color-neutral-600); margin-top: auto; padding-top: 12px; border-top: 1px solid var(--color-neutral-200); }

.offre--incluse { background: var(--color-primary-50); }
.offre--incluse .eyebrow { color: var(--color-primary-600); }
.offre--incluse p,
.offre--incluse .precision,
.offre--incluse .pied { color: var(--color-primary-700); }
.offre--incluse .pied { border-top-color: var(--color-primary-200); }

/* --- Plateformes ------------------------------------------------------ */

.pf-logo { height: 92px; display: flex; align-items: center; }
.pf-logo img { height: 92px; width: auto; display: block; }
.card--lg > p { font-size: 18px; line-height: 1.6; color: var(--color-neutral-700); }
.pf-detail { margin: 0; display: grid; grid-template-columns: 130px 1fr; gap: 10px 20px; font-size: 16px; line-height: 1.5; }
.pf-detail dt { font-weight: 700; color: var(--color-neutral-900); }
.pf-detail dd { margin: 0; color: var(--color-neutral-700); }

.note { font-size: 16px; line-height: 1.6; color: var(--color-neutral-600); font-style: italic; max-width: 760px; }
.note--after { margin-top: 28px; }

/* --- Questions dépliables (pas d'animation) --------------------------- */

.qa { max-width: var(--page-read); border-top: 1px solid var(--color-neutral-200); }
.qa details { border-bottom: 1px solid var(--color-neutral-200); }
.qa summary { padding: 20px 0; font-size: 19px; font-weight: 500; line-height: 1.45; color: var(--color-neutral-900); display: flex; gap: 4px; cursor: pointer; list-style: none; min-height: 44px; align-items: center; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before { content: '+'; display: inline-block; width: 20px; color: var(--color-primary-600); font-weight: 700; flex-shrink: 0; }
.qa details[open] > summary::before { content: '\2013'; }
.qa .answer { padding: 0 0 24px 24px; font-size: 17px; line-height: 1.65; color: var(--color-neutral-700); }

/* --- Contact ---------------------------------------------------------- */

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: start; }
.contact-grid h2 { font-size: 26px; line-height: 1.25; margin-bottom: 16px; }
.contact-grid > div > p { font-size: 17px; line-height: 1.6; color: var(--color-neutral-700); margin-bottom: 24px; }

.reseaux { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--color-neutral-200); }
.reseaux .eyebrow { display: block; margin-bottom: 16px; }
.reseaux-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.reseaux-liens a { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; text-decoration: none; color: var(--color-neutral-700); }
.reseaux-liens a:hover { color: var(--color-primary-600); }

/* --- Pied ------------------------------------------------------------- */

.site-footer { background: var(--color-neutral-900); color: var(--color-neutral-300); }
.site-footer a { color: var(--color-neutral-300); }
.site-footer a:hover { color: var(--color-neutral-0); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; padding-top: 56px; padding-bottom: 40px; }
.footer-grid .eyebrow { display: block; color: var(--color-neutral-400); margin-bottom: 14px; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-brand .brand-name { color: var(--color-neutral-50); }
.footer-grid p { font-size: 15px; line-height: 1.6; }
.footer-liens { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.footer-liens a { min-height: 24px; }
.footer-conformite { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-conformite .marque { background: var(--color-neutral-0); padding: 10px 12px; border-radius: var(--radius-sm); }
.footer-conformite img { display: block; height: 44px; width: auto; }

.footer-simple { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; font-size: 15px; padding-top: 40px; padding-bottom: 40px; }
.footer-simple div { display: flex; flex-wrap: wrap; gap: 24px; }

/* --- Page Tarifs ------------------------------------------------------ */

.tarifs-hero { padding-top: 72px; }
.tarifs-hero h1 { font-size: 48px; line-height: 1.1; margin-bottom: 20px; }
.tarifs-hero p { font-size: 20px; line-height: 1.55; color: var(--color-neutral-700); max-width: 720px; }
.tarifs-hero strong { font-weight: 700; color: var(--color-neutral-900); }

.table-scroll { border: 1px solid var(--color-neutral-200); overflow-x: auto; }
.table-tarifs { width: 100%; min-width: 720px; font-size: 16px; border-collapse: collapse; }
.table-tarifs th,
.table-tarifs td { padding: 18px 20px; border-bottom: 1px solid var(--color-neutral-200); text-align: left; vertical-align: top; line-height: 1.55; }
.table-tarifs thead th { background: var(--color-neutral-50); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-500); }
.table-tarifs thead th.pa { background: var(--color-neutral-50); font-size: 18px; letter-spacing: normal; text-transform: none; color: var(--color-neutral-900); }
.table-tarifs thead th.pa--incluse { background: var(--color-primary-50); color: var(--color-primary-700); }
.table-tarifs tbody th { font-size: 16px; font-weight: 700; color: var(--color-neutral-900); }
.table-tarifs td { color: var(--color-neutral-700); }
.table-tarifs th + th,
.table-tarifs th + td,
.table-tarifs td + td { border-left: 1px solid var(--color-neutral-200); }
.table-tarifs thead th:first-child { width: 26%; }


.encart {
  background: var(--color-primary-50); padding: 36px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
}
.encart h2 { font-size: 24px; line-height: 1.25; margin-bottom: 10px; color: var(--color-primary-700); }
.encart p { font-size: 17px; line-height: 1.6; color: var(--color-primary-700); }

/* --- Mentions légales -------------------------------------------------- */

.legal h1 { font-size: 40px; line-height: 1.15; margin-bottom: 48px; }
.legal-blocs { display: flex; flex-direction: column; gap: 36px; }
.legal-blocs h2 { font-size: 15px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary-600); margin-bottom: 12px; }
.legal-blocs p { font-size: 18px; line-height: 1.65; color: var(--color-neutral-700); }
.legal-retour { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--color-neutral-200); font-size: 17px; }

/* --- Page d'erreur ----------------------------------------------------- */

.erreur-page { min-height: 100vh; display: flex; flex-direction: column; }
.erreur-corps { flex: 1; display: flex; align-items: center; padding: 80px var(--page-gutter); }
.erreur-corps > div { max-width: 520px; margin: 0 auto; }
.erreur-corps h1 { font-size: 36px; line-height: 1.15; margin-bottom: 16px; }
.erreur-corps p { font-size: 18px; line-height: 1.65; color: var(--color-neutral-700); margin-bottom: 32px; }
.erreur-actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }

/* --- Newsletter -------------------------------------------------------- */

.newsletter-zone { background: var(--color-neutral-0); }

/* --- Petits écrans ------------------------------------------------------ */

@media (max-width: 900px) {
  :root { --page-gutter: 20px; }

  .site-header .wrap,
  .site-header .wrap-narrow,
  .site-header .wrap-read { flex-wrap: wrap; gap: 16px; }
  .site-nav { gap: 18px; }
  .brand-baseline { display: none; }

  .hero { padding-top: 40px; }
  .hero h1 { font-size: 34px; line-height: 1.1; margin-bottom: 16px; }
  .hero-chapo { font-size: 17px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-actions .btn,
  .hero-actions .link-action { width: 100%; }
  .hero-actions .link-action { justify-content: center; border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md); min-height: 48px; font-size: 16px; }
  .echeance { margin-top: 28px; padding: 16px 18px; }
  .echeance p { font-size: 14px; }

  .toc { margin-top: 32px; }
  .toc-links { gap: 8px; }
  .toc .wrap { padding-top: 10px; padding-bottom: 10px; }
  .toc-links a {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
    border: 1px solid var(--color-neutral-300); border-radius: 18px; flex-shrink: 0;
  }
  .toc > .wrap > .btn { display: none; }

  .section { padding-top: 36px; padding-bottom: 36px; scroll-margin-top: 58px; }
  .section-head { gap: 16px; margin-bottom: 12px; }
  .section-head h2 { font-size: 24px; }
  .section-chapo { font-size: 16px; margin-bottom: 20px; }

  .grid-rule { grid-template-columns: 1fr; }
  .grid-rule > * { padding: 20px; }
  .grid-cards { grid-template-columns: 1fr; gap: 12px; }
  .card, .card--lg { padding: 18px; gap: 12px; }

  .volet h3 { font-size: 18px; }
  .volet p, .offre p, .cas-answer p { font-size: 16px; }
  .cas-quote { font-size: 16px; }
  .offre h3 { font-size: 20px; }
  .pf-logo, .pf-logo img { height: 72px; }
  .pf-detail { grid-template-columns: 1fr; gap: 4px 0; }
  .pf-detail dd { margin-bottom: 8px; }

  .qa summary { font-size: 16px; padding: 16px 0; }
  .qa .answer { font-size: 15px; padding-bottom: 20px; }

  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-grid h2 { font-size: 22px; }
  .reseaux-liens { gap: 12px; }

  .tarifs-hero { padding-top: 40px; }
  .tarifs-hero h1 { font-size: 32px; }
  .tarifs-hero p { font-size: 17px; }
  .encart { padding: 20px; }
  .encart h2 { font-size: 20px; }
  .encart .btn { width: 100%; }

  .legal h1 { font-size: 28px; margin-bottom: 32px; }
  .legal-blocs { gap: 28px; }
  .legal-blocs p { font-size: 16px; }

  .erreur-corps { padding: 40px var(--page-gutter); }
  .erreur-corps h1 { font-size: 26px; }
  .erreur-actions { flex-direction: column; align-items: stretch; }
  .erreur-actions .btn { width: 100%; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; padding-bottom: 32px; }
  .footer-simple { padding-top: 28px; padding-bottom: 28px; }
}

/* ------------------------------------------------------------------
   Formulaire Brevo — aligné sur la charte
   Évolution 02.

   Pourquoi ici et pas dans les styles en ligne du bloc : le bloc Brevo
   est regénéré et recollé à chaque changement fait côté Brevo. Un
   habillage posé dans ses attributs `style` serait perdu à ce
   moment-là ; posé ici, il survit.

   D'où les `!important` : les styles en ligne de Brevo l'emportent
   autrement. Ils sont tous confinés au formulaire, aucun ne fuit.

   Le bloc Brevo lui-même reste intact : classes `sib-*`, `name`,
   `action`, champ pot de miel, `data-type` — rien de ce dont son
   script dépend n'est touché. Seules changent les couleurs, les
   rayons et les polices.
   ------------------------------------------------------------------ */

/* La bande qui entoure le formulaire */
.sib-form {
  background: var(--color-primary-100) !important;
  padding: 24px 16px !important;
}

/* La carte : angles vifs, comme les autres cartes du site */
#sib-container {
  background: var(--color-neutral-0) !important;
  border-color: var(--color-neutral-300) !important;
  border-radius: 0 !important;
  font-family: var(--font-family-sans) !important;
}

/* Titre du bloc */
.sib-form .sib-form-block p {
  font-family: var(--font-family-sans) !important;
  color: var(--color-neutral-900) !important;
}

/* Libellé du champ */
.sib-form .entry__label {
  font-family: var(--font-family-sans) !important;
  color: var(--color-neutral-700) !important;
}

/* Le champ lui-même : rayon des champs de la charte */
.sib-form input.input {
  font-family: var(--font-family-sans) !important;
  color: var(--color-neutral-900) !important;
  border-color: var(--color-neutral-300) !important;
  border-radius: var(--radius-md) !important;
}
.sib-form input.input:focus-visible {
  outline: 2px solid var(--color-primary-600);
  outline-offset: 2px;
}
#sib-container input::placeholder,
#sib-container textarea::placeholder {
  color: var(--color-neutral-400) !important;
}

/* L'astérisque « obligatoire » : le rouge de Brevo (#ff4949) n'est pas
   de la charte */
.sib-form .entry__label[data-required]::after {
  color: var(--color-danger-500) !important;
}

/* Mention de consentement au suivi, et mention légale Brevo */
.sib-form .entry__choice span,
.sib-form__declaration div {
  font-family: var(--font-family-sans) !important;
  color: var(--color-neutral-500) !important;
}

/* Bouton : celui du site, zone tactile comprise */
.sib-form .sib-form-block__button {
  font-family: var(--font-family-sans) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-align: center !important;
  min-height: 44px !important;
  padding: 0 20px !important;
  background: var(--color-primary-600) !important;
  color: var(--color-neutral-0) !important;
  border: 0 !important;
  border-radius: var(--radius-md) !important;
}
.sib-form .sib-form-block__button:hover {
  background: var(--color-primary-700) !important;
}

/* Liens dans le formulaire — le bleu de Brevo n'est pas de la charte */
#sib-container a {
  color: var(--color-primary-600) !important;
}
#sib-container a:hover {
  color: var(--color-primary-700) !important;
}

/* Bandeaux de réponse : les couleurs sémantiques de la charte,
   angles vifs comme la carte qui les porte */
.sib-form #error-message,
.sib-form .entry__error {
  font-family: var(--font-family-sans) !important;
  color: var(--color-danger-700) !important;
  background: var(--color-danger-50) !important;
  border-color: var(--color-danger-500) !important;
  border-radius: 0 !important;
}
.sib-form #success-message {
  font-family: var(--font-family-sans) !important;
  color: var(--color-success-700) !important;
  background: var(--color-success-50) !important;
  border-color: var(--color-success-500) !important;
  border-radius: 0 !important;
}