/* ==========================================================================
   bibliotheque-rfid.com — Design system
   Dérivé de la charte graphique CIPAM (spécification PowerPoint, juillet 2026)
   Transposition web : échelles typographiques ramenées du 1920 px au viewport.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Accents de marque */
  --c-blue:        #115CFA;
  --c-blue-dark:   #0D46C4;
  --c-green:       #00E676;
  --c-green-dark:  #00B85E;

  /* Neutres */
  --c-ink:         #262828;   /* jamais de noir pur */
  --c-muted:       #707171;
  --c-rule:        #E7E6E6;
  --c-white:       #FFFFFF;
  --c-surface:     #FAFAFA;
  --c-plate:       #FFFFFF;   /* plaque produit : les rendus du constructeur
                                 ont un fond blanc opaque, toute autre teinte
                                 dessine un rectangle blanc au milieu */

  /* Teintes douces */
  --c-blue-soft:   #B7CEFD;
  --c-green-soft:  #B2F7D6;
  --c-blue-wash:   #EEF3FE;
  --c-green-wash:  #E8FCF2;

  /* Fonctionnelles (statuts uniquement) */
  --c-warn-bg:     #FEF3C7;
  --c-warn-ink:    #B45309;
  --c-error:       #DC2626;
  --c-ok:          #2E9E5B;

  /* Dégradé signature — issu du « M » du logo. Usage rare. */
  --grad-signature: linear-gradient(135deg, #008FC1 0%, #00C899 50%, #00F879 100%);

  /* Typographie */
  --f-display: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-ui:      "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-numeric: "Roboto Slab", Georgia, serif;

  /* Échelle fluide */
  --t-hero:    clamp(2.25rem, 1.30rem + 3.6vw, 4.00rem);
  --t-h1:      clamp(2.00rem, 1.35rem + 2.4vw, 3.25rem);
  --t-h2:      clamp(1.55rem, 1.15rem + 1.5vw, 2.35rem);
  --t-h3:      clamp(1.20rem, 1.03rem + 0.6vw, 1.55rem);
  --t-body:    clamp(1.00rem, 0.96rem + 0.18vw, 1.125rem);
  --t-lead:    clamp(1.10rem, 1.00rem + 0.45vw, 1.35rem);
  --t-small:   0.9375rem;
  --t-eyebrow: 0.8125rem;
  --t-kpi:     clamp(2.75rem, 1.80rem + 3.6vw, 4.50rem);

  /* Rythme */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  /* Formes */
  --r-card: 14px;
  --r-panel: 20px;
  --r-btn:  8px;
  --r-pill: 999px;
  --shadow: 0 2px 6px rgba(38, 40, 40, 0.08);
  --shadow-lift: 0 6px 20px rgba(38, 40, 40, 0.10);

  /* Gabarit */
  --w-max:   1320px;
  --w-prose: 86ch;
  --gutter:  clamp(1rem, 0.6rem + 2vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   2. Réinitialisation
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--c-blue); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--c-blue-dark); }

:focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   3. Typographie
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 800;
  color: var(--c-ink);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); margin-top: var(--sp-8); }
h3 { font-size: var(--t-h3); margin-top: var(--sp-6); line-height: 1.25; }
h4 { font-size: 1.05rem; margin-top: var(--sp-5); }

h1:first-child, h2:first-child, h3:first-child { margin-top: 0; }

p, ul, ol { margin: 0 0 var(--sp-5); }
li { margin-bottom: var(--sp-2); }

strong { font-weight: 700; }

/* Un mot-clé colorié dans le titre — règle rédactionnelle CIPAM */
.hl        { color: var(--c-blue); }
.hl-green  { color: var(--c-green-dark); }

.eyebrow {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-blue);
  margin: 0 0 var(--sp-3);
  display: block;
}
.eyebrow--green { color: var(--c-green-dark); }
.eyebrow--light { color: var(--c-blue-soft); }

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--c-ink);
  max-width: 68ch;
}

.subtitle {
  font-weight: 500;
  color: var(--c-muted);
  font-size: var(--t-lead);
  max-width: 68ch;
}

.legend, .source {
  font-size: var(--t-small);
  color: var(--c-muted);
}

/* Réponse directe en tête de page — bloc extractible (AEO) */
.answer {
  font-size: var(--t-lead);
  line-height: 1.55;
  padding: var(--sp-5) var(--sp-6);
  background: var(--c-blue-wash);
  border-radius: var(--r-card);
  margin: 0 0 var(--sp-7);
  max-width: 70ch;
}
.answer p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   4. Gabarit
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--w-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Les pages de texte gardent le conteneur large : c'est la colonne de texte
   qui est bornee, et elle part du bord gauche au lieu d'etre centree dans le
   vide. Un titre, un tableau, un schema ou une image peuvent donc depasser
   cette colonne et occuper toute la largeur utile. */
.wrap--prose > * { max-width: var(--w-prose); }
.wrap--prose > h1,
.wrap--prose > h2,
.wrap--prose > .full,
.wrap--prose > figure,
.wrap--prose > .table-scroll,
.wrap--prose > .schema,
.wrap--prose > .grid,
.wrap--prose > .split,
.wrap--prose > .panels,
.wrap--prose > .media,
.wrap--prose > .banner { max-width: none; }

.section { padding-block: var(--sp-9); }
.section--tight { padding-block: var(--sp-7); }
.section--surface { background: var(--c-surface); }
.section--wash { background: var(--c-blue-wash); }

/* Séparateur de section sur fond anthracite — charte CIPAM */
.section--ink {
  background: var(--c-ink);
  color: var(--c-white);
}
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--c-white); }
.section--ink .subtitle, .section--ink .legend { color: #B9BABA; }
.section--ink a { color: var(--c-green); }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.split {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 860px) {
  .split { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-8); }
  .split--reverse > :first-child { order: 2; }
  /* Texte a gauche, visuel plus large a droite, les deux centres verticalement */
  .split--media { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: center; }
  .split--media.split--reverse { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
}
.split--center { align-items: center; }

.stack > * + * { margin-top: var(--sp-4); }

/* --------------------------------------------------------------------------
   5. Composants
   -------------------------------------------------------------------------- */

/* Cartes — pas de bordure d'accent colorée à gauche (charte) */
.card {
  background: var(--c-white);
  border: 1px solid var(--c-rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--sp-6);
}
.card h3 { margin-top: 0; margin-bottom: var(--sp-3); font-size: 1.2rem; }
.card p:last-child { margin-bottom: 0; }

a.card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
a.card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
  border-color: var(--c-blue-soft);
  color: inherit;
}
a.card h3 { color: var(--c-ink); }
a.card .card__more {
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: var(--t-small);
  color: var(--c-blue);
  margin-top: var(--sp-4);
  display: inline-block;
}
a.card:hover .card__more { text-decoration: underline; }

/* Bloc KPI */
.kpi { text-align: left; }
.kpi__value {
  font-family: var(--f-numeric);
  font-weight: 300;
  font-size: var(--t-kpi);
  line-height: 1;
  color: var(--c-ink);
  display: block;
  margin-bottom: var(--sp-3);
}
.kpi__value--gradient {
  background: var(--grad-signature);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kpi__label {
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  display: block;
}
.kpi--soft-blue,
.kpi--soft-green {
  padding: var(--sp-6);
  border-radius: var(--r-card);
}
.kpi--soft-blue  { background: var(--c-blue-soft); }
.kpi--soft-green { background: var(--c-green-soft); }
.section--ink .kpi__value { color: var(--c-white); }
.section--ink .kpi__label { color: #B9BABA; }

/* Badges */
.badge {
  display: inline-block;
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.2;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: var(--c-blue-wash);
  color: var(--c-blue);
}
.badge--green { background: var(--c-green-wash); color: var(--c-green-dark); }
.badge--neutral { background: var(--c-surface); color: var(--c-muted); border: 1px solid var(--c-rule); }

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 0;
  margin: 0 0 var(--sp-5);
  list-style: none;
}
.badge-row li { margin: 0; }

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  padding: 15px 26px;
  border-radius: var(--r-btn);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn--primary {
  background: var(--c-blue);
  color: var(--c-white);
  border-color: var(--c-blue);
}
.btn--primary:hover { background: var(--c-blue-dark); border-color: var(--c-blue-dark); color: var(--c-white); }

.btn--success {
  background: var(--c-green);
  color: var(--c-ink);
  border-color: var(--c-green);
}
.btn--success:hover { background: var(--c-green-dark); border-color: var(--c-green-dark); color: var(--c-ink); }

.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-rule);
}
.btn--ghost:hover { border-color: var(--c-ink); color: var(--c-ink); }

.section--ink .btn--ghost { color: var(--c-white); border-color: rgba(255,255,255,.35); }
.section--ink .btn--ghost:hover { border-color: var(--c-white); color: var(--c-white); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* Tableaux — filet inférieur bleu sur l'en-tête (seule bordure de marque) */
.table-scroll { overflow-x: auto; margin-bottom: var(--sp-6); }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
}
thead th {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 0.8125rem;
  text-align: left;
  color: var(--c-ink);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 2px solid var(--c-blue);
  white-space: nowrap;
}
tbody td, tbody th {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--c-rule);
  vertical-align: top;
  text-align: left;
  font-weight: 400;
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Listes à puces métier */
.ticks { list-style: none; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: var(--sp-3);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.58em;
  width: 10px; height: 10px;
  border-radius: 2px;
  background: var(--c-green);
}
.ticks--blue li::before { background: var(--c-blue); }

/* FAQ */
.faq details {
  border-bottom: 1px solid var(--c-rule);
  padding: var(--sp-5) 0;
}
.faq details:first-of-type { border-top: 1px solid var(--c-rule); }
.faq summary {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  align-items: flex-start;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-blue);
  flex: none;
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > *:not(summary) { margin-top: var(--sp-4); max-width: var(--w-prose); }
.faq details p:last-child { margin-bottom: 0; }

/* Fil d'Ariane */
.crumbs {
  font-family: var(--f-ui);
  font-size: var(--t-small);
  color: var(--c-muted);
  padding-block: var(--sp-5) 0;
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0; margin: 0; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--c-rule); }
.crumbs a { color: var(--c-muted); text-decoration: none; }
.crumbs a:hover { color: var(--c-blue); text-decoration: underline; }

/* --------------------------------------------------------------------------
   6. En-tête et navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--c-rule);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 74px;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  text-decoration: none;
  flex: none;
}
.brand__mark {
  background: var(--grad-signature);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand__by {
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.nav { display: none; }
@media (min-width: 1000px) {
  .nav { display: flex; align-items: stretch; gap: var(--sp-4); }
}
@media (min-width: 1240px) {
  .nav { gap: var(--sp-5); }
}
.nav__item { position: relative; display: flex; align-items: center; }
.nav > .nav__item > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
  /* la zone de survol couvre toute la hauteur de l'en-tete,
     pour que la souris atteigne le panneau sans le perdre */
  padding-block: 26px;
}
.nav > .nav__item > a:hover,
.nav > .nav__item > a[aria-current="page"] { color: var(--c-blue); }
.nav__chev { width: 11px; height: 7px; flex: none; opacity: .7; transition: transform var(--t-fast, .15s) ease; }
.nav__item--has-panel:hover .nav__chev,
.nav__item--has-panel:focus-within .nav__chev,
.nav__item--has-panel[data-open="true"] .nav__chev { transform: rotate(180deg); opacity: 1; }

.nav__panel {
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--sp-5));
  min-width: 268px;
  background: var(--c-white);
  border: 1px solid var(--c-rule);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(38,40,40,.14);
  padding: var(--sp-5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 70;
}
.nav__panel--large { min-width: 600px; }
.nav__item--has-panel:hover > .nav__panel,
.nav__item--has-panel:focus-within > .nav__panel,
.nav__item--has-panel[data-open="true"] > .nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__cols { display: grid; gap: var(--sp-5) var(--sp-7); }
.nav__panel--large .nav__cols { grid-template-columns: repeat(2, minmax(230px, 1fr)); }
.nav__col { display: flex; flex-direction: column; }
.nav__group {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 var(--sp-3);
}
.nav__panel a {
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--c-ink);
  text-decoration: none;
  padding: 7px 10px;
  margin-inline: -10px;
  border-radius: 8px;
}
.nav__panel a:hover, .nav__panel a:focus-visible {
  background: var(--c-blue-wash);
  color: var(--c-blue);
}
.nav__all {
  display: inline-block;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-rule);
  width: 100%;
  font-size: 0.8125rem !important;
  color: var(--c-blue) !important;
}
.nav__all::after { content: " \2192"; }

@media (prefers-reduced-motion: reduce) {
  .nav__panel { transition: none; }
  .nav__chev { transition: none; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 0.9375rem;
  background: none;
  border: 1px solid var(--c-rule);
  border-radius: var(--r-btn);
  padding: 10px 16px;
  color: var(--c-ink);
  cursor: pointer;
}
@media (min-width: 1000px) { .nav-toggle { display: none; } }

.mobile-nav { display: none; border-top: 1px solid var(--c-rule); padding-block: var(--sp-4) var(--sp-6); }
.mobile-nav[data-open="true"] { display: block; }
@media (min-width: 1000px) { .mobile-nav { display: none !important; } }
.mobile-nav a {
  display: block;
  font-family: var(--f-ui);
  font-weight: 500;
  color: var(--c-ink);
  text-decoration: none;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-rule);
}
.mobile-nav__sect { border-bottom: 1px solid var(--c-rule); }
.mobile-nav__sect > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--f-ui);
  font-weight: 500;
  color: var(--c-ink);
  padding: var(--sp-3) 0;
  cursor: pointer;
  list-style: none;
}
.mobile-nav__sect > summary::-webkit-details-marker { display: none; }
.mobile-nav__sect > summary::after {
  content: "+";
  font-size: 1.25rem;
  line-height: 1;
  color: var(--c-muted);
}
.mobile-nav__sect[open] > summary::after { content: "\2212"; }
.mobile-nav__sect > summary + * { margin-top: var(--sp-2); }
.mobile-nav__sect a { border-bottom: 0; padding: var(--sp-2) 0 var(--sp-2) var(--sp-5); }
.mobile-nav__sub { font-size: 0.9375rem; color: var(--c-muted) !important; }
.mobile-nav__sub:hover { color: var(--c-blue) !important; }
.mobile-nav__all { font-size: 0.8125rem; color: var(--c-blue) !important; }
.mobile-nav__group {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: var(--sp-4) 0 var(--sp-2);
  padding-left: var(--sp-5);
}
.mobile-nav__sect:last-of-type { margin-bottom: var(--sp-3); }

.header-cta { display: none; white-space: nowrap; }
@media (min-width: 1140px) { .header-cta { display: inline-flex; } }

/* --------------------------------------------------------------------------
   7. Couverture — motif « pie » réservé à l'accueil et à la clôture
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-9) var(--sp-8);
}
.hero__inner { position: relative; z-index: 2; max-width: 44rem; }
.hero h1 { font-size: var(--t-hero); }

.pie {
  position: absolute;
  top: -22%;
  right: -14%;
  width: min(58vw, 680px);
  aspect-ratio: 1;
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 860px) { .pie { opacity: .38; right: -34%; top: -12%; } }

/* Couverture en deux colonnes : le discours a gauche, la photo a droite.
   Le camembert de la charte reste, mais il passe derriere la photo et sert
   de fond, au lieu d'occuper seul le cote droit. */
.hero--split { padding-block: var(--sp-8) var(--sp-9); }
.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 960px) {
  /* La colonne de gauche est la plus large : les deux boutons d'appel a
     l'action doivent tenir cote a cote sans passer a la ligne. */
  .hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: var(--sp-8); }
}
.hero__copy { max-width: 40rem; }
.hero__copy h1 { font-size: var(--t-hero); }
.hero__media {
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--c-surface);
  box-shadow: var(--shadow-lift);
}
.hero__media img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 28%;
}
/* En grand format la photo se rapproche du carre : elle equilibre alors la
   hauteur du bloc de texte au lieu de flotter a mi-hauteur. */
@media (min-width: 960px) { .hero__media img { aspect-ratio: 1 / 1; } }
/* Le camembert tient entierement dans la zone visible : decale hors cadre, le
   quadrant en degrade se retrouvait coupe net par overflow: hidden et se
   lisait comme un rectangle vert parasite en haut a droite. */
.hero--split .pie { width: min(30vw, 340px); top: 5%; right: 0; }
@media (max-width: 960px) { .hero--split .pie { opacity: .3; top: -8%; } }

/* --------------------------------------------------------------------------
   7 bis. Panneaux a image dominante
   Un panneau porte un titre court, deux lignes, et une image qui remplit le
   bas. Cliquable en entier quand c'est un lien.
   -------------------------------------------------------------------------- */
.panels { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 780px)  { .panels--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .panels--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.panel {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-rule);
  border-radius: var(--r-panel);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.panel:hover, a.panel:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: var(--c-blue-soft);
}
.panel__body { padding: var(--sp-6); }
.panel__body h3 { margin: 0 0 var(--sp-3); font-size: var(--t-h3); }
.panel__body p { color: var(--c-muted); margin-bottom: 0; }
.panel__more {
  display: inline-block;
  margin-top: var(--sp-4);
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: var(--t-small);
  color: var(--c-blue);
}
.panel__media { margin-top: auto; }
.panel__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.panel--tall .panel__media img { aspect-ratio: 4 / 3; }
.panel--wash { background: var(--c-blue-wash); border-color: #DCE7FD; }
.panel--screen .panel__media {
  background: var(--c-white);
  border-top: 1px solid var(--c-rule);
  padding: var(--sp-5) var(--sp-5) 0;
}
.panel--screen .panel__media img {
  aspect-ratio: auto;
  border-radius: 6px 6px 0 0;
  border: 1px solid var(--c-rule);
  border-bottom: 0;
}
.panel--plate .panel__media {
  background: var(--c-plate);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}
.panel--plate .panel__media img {
  aspect-ratio: auto;
  width: auto;
  max-height: 210px;
  object-fit: contain;
}

/* Visuel de colonne : meme traitement que la photo de couverture, a hauteur
   libre, pour les sections en deux colonnes. */
.frame {
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--c-surface);
}
.frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.frame--wide img { aspect-ratio: 16 / 9; }
.frame--plate {
  background: var(--c-plate);
  border: 1px solid var(--c-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
}
.frame--plate img { aspect-ratio: auto; width: auto; max-height: 340px; object-fit: contain; }

/* --------------------------------------------------------------------------
   8. Appels à l'action
   -------------------------------------------------------------------------- */
.cta-band {
  background: var(--c-ink);
  color: var(--c-white);
  border-radius: var(--r-card);
  padding: var(--sp-8) var(--sp-7);
  position: relative;
  overflow: hidden;
}
.cta-band h2 { color: var(--c-white); margin-top: 0; }
.cta-band p { color: #C9CACA; max-width: 52ch; }
/* Le bouton secondaire heritait du texte sombre : sur le fond anthracite du
   bandeau, son libelle devenait illisible, noir sur noir. */
/* Cloture de page : le discours a gauche, le formulaire a droite. */
.cta-band--form { display: grid; gap: var(--sp-7); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .cta-band--form { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: var(--sp-8); align-items: start; }
}
.cta-band--form .form-card { color: var(--c-ink); }
.cta-band--form .form-card label { color: var(--c-ink); }
/* Relance de milieu de page : une ligne, un lien, rien de plus. */
.relance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  background: var(--c-blue-wash);
  border-radius: var(--r-panel);
  padding: var(--sp-5) var(--sp-6);
}
.relance p { font-weight: 500; flex: 1 1 22ch; }
.relance__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); flex: none; }
.relance .btn--ghost { background: var(--c-white); }
.relance .btn { flex: none; }

.telecharger { margin: var(--sp-6) 0 var(--sp-3); }
.section--ink .legend { color: #B9BABA; }

/* Deux facons d'entrer en contact, cote a cote */
.appel {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  border: 1px solid var(--c-rule);
  border-radius: var(--r-panel);
  padding: var(--sp-6);
  background: var(--c-surface);
}
@media (min-width: 780px) { .appel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7); } }
.appel__tel { margin: 0 0 var(--sp-2); }
.appel__tel .tel { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); color: var(--c-blue); }

/* Ligne directe : elle doit se lire comme un numero, pas comme un lien de plus */
.tel {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.site-footer .tel { color: var(--c-white); }
.site-footer .tel:hover { text-decoration: underline; }
.cta-band__tel {
  margin-top: var(--sp-6);
  margin-bottom: 0;
  color: #C9CACA;
  font-size: var(--t-small);
}
.cta-band__tel .tel { color: var(--c-green); font-size: 1.125rem; margin-left: var(--sp-2); }

.form-repli { font-size: var(--t-small); color: var(--c-muted); margin: 0; }
.cta-band__aside { color: #C9CACA; font-size: var(--t-small); margin-top: var(--sp-6); margin-bottom: 0; }
.cta-band__aside a { color: var(--c-green); }

.cta-band .btn--ghost {
  color: var(--c-white);
  border-color: rgba(255, 255, 255, .35);
}
.cta-band .btn--ghost:hover,
.cta-band .btn--ghost:focus-visible {
  color: var(--c-white);
  border-color: var(--c-white);
  background: rgba(255, 255, 255, .08);
}

.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  background: var(--c-white);
  border-top: 1px solid var(--c-rule);
  padding: var(--sp-3) var(--gutter);
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -2px 10px rgba(38,40,40,.07);
}
.sticky-cta__text {
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.3;
}
.sticky-cta .btn { padding: 12px 18px; font-size: 0.875rem; flex: none; }
@media (min-width: 860px) { .sticky-cta { display: none; } }

/* --------------------------------------------------------------------------
   9. Pied de page
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--c-ink);
  color: #B9BABA;
  padding-block: var(--sp-8) var(--sp-6);
  margin-top: var(--sp-9);
}
.site-footer h2, .site-footer h3 { color: var(--c-white); }
.site-footer h3 {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-4);
}
.site-footer a { color: #B9BABA; text-decoration: none; }
.site-footer a:hover { color: var(--c-white); text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--sp-3); font-size: var(--t-small); }

.footer-legal {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  justify-content: space-between;
  font-size: var(--t-small);
}
.footer-legal ul { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.footer-legal li { margin: 0; }

.operator {
  font-size: var(--t-small);
  line-height: 1.55;
  max-width: 34ch;
}
.operator strong { color: var(--c-white); }

/* Formulaire HubSpot, fond blanc imposé par la charte */
.form-card {
  background: var(--c-white);
  border: 1px solid var(--c-rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--sp-6);
}
.form-card .hs-form-field { margin-bottom: var(--sp-4); }
.form-card label {
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 0.875rem;
  display: block;
  margin-bottom: var(--sp-2);
}
.form-card input[type=text], .form-card input[type=email], .form-card input[type=tel],
.form-card select, .form-card textarea {
  width: 100%;
  font-family: var(--f-display);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--c-rule);
  border-radius: var(--r-btn);
  background: var(--c-white);
  color: var(--c-ink);
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus {
  outline: 3px solid var(--c-blue);
  outline-offset: 1px;
  border-color: var(--c-blue);
}
.form-card .hs-button {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 0.9375rem;
  background: var(--c-blue);
  color: var(--c-white);
  border: none;
  border-radius: var(--r-btn);
  padding: 15px 26px;
  cursor: pointer;
}
.form-card .hs-button:hover { background: var(--c-blue-dark); }
.form-card .hs-error-msg { color: var(--c-error); font-size: var(--t-small); }

/* Simulateur de retour sur investissement

   Mise en page en pile : les champs d'abord, l'estimation ensuite, le detail
   en dernier. La version en deux colonnes demandait de lire a gauche et a
   droite en meme temps, ce qui donnait une page chargee sans rien mettre en
   avant. Empile, chaque bloc occupe toute la largeur et l'ordre de lecture
   suit l'ordre des operations.

   Le panneau d'estimation est bleu : c'est la couleur de la marque, et un
   panneau noir au milieu d'une page claire se lit comme un avertissement
   plutot que comme un resultat. */
.sim { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }

.sim__panel {
  background: var(--c-white);
  border: 1px solid var(--c-rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--sp-6);
}
@media (min-width: 900px) { .sim__panel { padding: var(--sp-7); } }

.sim__h { margin: 0; font-size: var(--t-h3); }
.sim__intro {
  color: var(--c-muted);
  font-size: var(--t-small);
  max-width: 68ch;
  margin: var(--sp-3) 0 var(--sp-6);
}

/* Les champs se repartissent sur la largeur : sur un ecran large, une colonne
   unique de onze champs obligerait a faire defiler avant d'atteindre le
   moindre resultat. */
.sim__grid {
  display: grid;
  gap: var(--sp-5) var(--sp-6);
  grid-template-columns: 1fr;
  align-items: stretch;
}
/* Nombre de colonnes fixe plutot qu'auto-fit : les neuf champs tombent alors
   sur trois rangees pleines, et les libelles longs ne se coupent plus au
   milieu d'un mot comme le faisait une quatrieme colonne trop etroite. */
@media (min-width: 700px)  { .sim__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .sim__grid { grid-template-columns: repeat(3, 1fr); } }

/* Les libelles n'ont pas tous une note explicative, donc pas tous la meme
   hauteur. Sans cela, les champs d'une meme rangee flottent a des hauteurs
   differentes et la grille se lit mal. */
.sim__field {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
.sim__field label {
  display: block;
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 0.875rem;
  margin-bottom: var(--sp-2);
  flex: 1 0 auto;
}
.sim__field .hint {
  display: block;
  font-size: 0.8125rem;
  color: var(--c-muted);
  font-weight: 400;
  margin-top: 2px;
}
.sim__field input[type=number] {
  width: 100%;
  font-family: var(--f-display);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  padding: 11px 13px;
  border: 1px solid var(--c-rule);
  border-radius: var(--r-btn);
  background: var(--c-white);
  color: var(--c-ink);
}
.sim__field input[type=number]:focus { outline: 3px solid var(--c-blue); outline-offset: 1px; }

.sim__field--large {
  margin-top: var(--sp-6);
  background: var(--c-blue-wash);
  border-radius: var(--r-btn);
  padding: var(--sp-4) var(--sp-5);
}
.sim__field--large label {
  flex: none;
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-bottom: 0;
  cursor: pointer;
}
.sim__field--large input[type=checkbox] { width: auto; margin-top: 0.2rem; flex: none; }

.sim__hyp { margin-top: var(--sp-6); }
.sim__hyp > summary {
  cursor: pointer;
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 0.9rem;
}

.sim__go {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-rule);
  text-align: center;
}
.sim__go .btn { min-width: 280px; justify-content: center; }
.sim__go .legend { margin-top: var(--sp-3); }

/* Estimation */
.sim__out {
  background: linear-gradient(140deg, #1657E8 0%, #0B3CAE 100%);
  color: var(--c-white);
  border-radius: var(--r-card);
  padding: var(--sp-6);
}
@media (min-width: 900px) { .sim__out { padding: var(--sp-7); } }
.sim__out:focus { outline: none; }
.sim__out:focus-visible { outline: 3px solid var(--c-green); outline-offset: 3px; }
.sim__out h3 {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #DDE7FE;
  margin: 0 0 var(--sp-6);
}
.sim__tiles { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.sim__tile .v {
  font-family: var(--f-numeric);
  font-weight: 300;
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem);
  line-height: 1;
  display: block;
  color: var(--c-white);
}
/* Sur fond bleu, le degrade signature perd sa moitie bleue. Le vert de la
   charte ressort, et il reste le seul element colore du panneau. */
.sim__tile .v--grad {
  background: linear-gradient(135deg, #00E676 0%, #B2F7D6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sim__tile .k {
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #DDE7FE;
  display: block;
  margin-top: var(--sp-3);
}
.sim__note {
  border-top: 1px solid rgba(255,255,255,.28);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  font-size: var(--t-small);
  color: #DDE7FE;
}
.sim__note p:last-child { margin-bottom: 0; }

.sim__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,.28);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
}
.sim__cta p { font-family: var(--f-ui); font-size: var(--t-small); max-width: 52ch; }
.sim__cta .btn { flex: none; }

.sim__detail table { font-size: var(--t-small); }
.sim__detail thead th { border-bottom-color: var(--c-blue); }
.sim__detail-h {
  margin: 0 0 var(--sp-5);
  font-family: var(--f-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Jeton de contenu manquant, visible pour empêcher toute mise en ligne accidentelle */
.todo {
  background: var(--c-warn-bg);
  color: var(--c-warn-ink);
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 2px 8px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   10. Utilitaires
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   14. Bandeau de consentement
   Il s'affiche tant qu'aucun choix n'a ete fait, et masque la barre flottante
   pour ne pas empiler deux elements colles au bas de l'ecran.
   -------------------------------------------------------------------------- */
.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  padding: var(--sp-4);
  display: flex;
  justify-content: center;
}
.consent[hidden] { display: none; }
body.consent-ouvert .sticky-cta { display: none; }

.consent__box {
  width: 100%;
  max-width: 60rem;
  background: var(--c-white);
  border: 1px solid var(--c-rule);
  border-radius: var(--r-panel);
  box-shadow: 0 10px 40px rgba(38, 40, 40, .18);
  padding: var(--sp-6);
}
.consent__titre {
  font-size: 1.1rem;
  margin: 0 0 var(--sp-3);
}
.consent__texte {
  font-size: var(--t-small);
  color: var(--c-muted);
  margin: 0 0 var(--sp-5);
  max-width: 74ch;
}
.consent__detail {
  border-top: 1px solid var(--c-rule);
  padding-top: var(--sp-4);
  margin-bottom: var(--sp-5);
  display: grid;
  gap: var(--sp-4);
}
.consent__detail[hidden] { display: none; }
.consent__ligne {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--t-small);
  color: var(--c-muted);
  cursor: pointer;
}
.consent__ligne strong { color: var(--c-ink); }
.consent__ligne input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--c-blue); }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.consent__actions .btn { flex: 1 1 auto; justify-content: center; }
@media (min-width: 640px) { .consent__actions .btn { flex: 0 0 auto; } }
.consent__actions .btn[hidden] { display: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-blue);
  color: var(--c-white);
  font-family: var(--f-ui);
  padding: var(--sp-3) var(--sp-5);
  z-index: 100;
}
.skip-link:focus { left: var(--gutter); top: var(--sp-3); color: var(--c-white); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.measure { max-width: var(--w-prose); }

/* --------------------------------------------------------------------------
   11. Images
   -------------------------------------------------------------------------- */
img { max-width: 100%; height: auto; }

/* Photo de situation, pleine largeur du conteneur */
.media {
  display: block;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--c-surface);
}
.media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: cover;
  object-position: 50% 32%;
}

/* Vue produit détourée, posée sur une plaque claire.
   Le fond reprend la teinte chaude des visuels du constructeur : la borne
   blanche et verte se lit mieux sur crème que sur blanc pur. */
.shot {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-plate);
  border: 1px solid var(--c-rule);
  border-radius: 14px;
  padding: var(--sp-6);
  min-height: 260px;
}
.shot img { display: block; max-height: 380px; width: auto; }
.shot--tall img { max-height: 460px; }

/* Capture d'interface, cadre clair */
.screen {
  background: var(--c-surface);
  border: 1px solid var(--c-rule);
  border-radius: 14px;
  padding: var(--sp-5);
}
.screen img { display: block; width: 100%; border-radius: 6px; }

figure { margin: 0 0 var(--sp-6); }
figure > figcaption {
  margin-top: var(--sp-3);
  font-family: var(--f-ui);
  font-size: var(--t-small);
  color: var(--c-muted);
  line-height: 1.5;
}

/* Bandeau photo large, utilisé en tête de rubrique */
.banner {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--c-ink);
}
.banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.banner--short { height: clamp(220px, 34vw, 400px); }
.banner--short img { height: 100%; object-position: 50% 18%; }

/* Carte produit avec vignette */
.card--shot { padding: 0; overflow: hidden; }
.card--shot .card__img {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-plate);
  border-bottom: 1px solid var(--c-rule);
  height: 190px;
  padding: var(--sp-4);
}
.card--shot .card__img img { max-height: 160px; width: auto; }
/* vignette photographique : elle occupe toute la surface de la carte */
.card--shot .card__img--photo { padding: 0; }
.card--shot .card__img--photo img {
  max-height: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card--shot .card__body { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.card--shot .card__body h3 { margin-top: 0; }

/* Paire image + texte pour une fiche produit */
.spec-split { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 860px) {
  .spec-split { grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-8); }
  .spec-split--reverse > :first-child { order: 2; }
}

/* --------------------------------------------------------------------------
   12. Schémas SVG
   -------------------------------------------------------------------------- */
.schema {
  background: var(--c-white);
  border: 1px solid var(--c-rule);
  border-radius: 14px;
  padding: var(--sp-6);
  margin: 0 0 var(--sp-6);
  overflow-x: auto;
}
.schema__svg {
  display: block;
  width: 100%;
  min-width: 720px;
  height: auto;
}
.schema > figcaption {
  margin-top: var(--sp-5);
  max-width: var(--w-prose);
}

.s-box {
  fill: var(--c-surface);
  stroke: var(--c-rule);
  stroke-width: 1.5;
}
.s-box--soft   { fill: var(--c-blue-wash); stroke: var(--c-blue-soft); }
.s-box--key    { fill: var(--c-ink); stroke: var(--c-ink); }
.s-box--green  { fill: var(--c-green-soft); stroke: var(--c-green-soft); }
.s-box--base   { fill: var(--c-white); stroke: var(--c-blue); stroke-width: 2; }
.s-box--rejet  { fill: var(--c-white); stroke: var(--c-muted); stroke-dasharray: 5 4; }
.s-box--hors   { fill: var(--c-white); stroke: var(--c-muted); stroke-dasharray: 5 4; }

.s-arrow {
  fill: none;
  stroke: var(--c-blue);
  stroke-width: 1.8;
}
.s-arrow--dash { stroke: var(--c-green-dark); stroke-dasharray: 6 5; }

.s-t {
  font-family: var(--f-ui);
  text-anchor: middle;
  fill: var(--c-ink);
}
.s-t--lead  { font-size: 17px; font-weight: 600; }
.s-t--small { font-size: 14.5px; font-weight: 500; }
.s-t--micro { font-size: 12.5px; font-weight: 500; fill: var(--c-muted); }
.s-t--on    { fill: var(--c-white); }
.s-t--on.s-t--micro { fill: #B9BABA; }
.s-t--left  { text-anchor: start; }

@media (max-width: 720px) {
  .schema { padding: var(--sp-4); }
}

/* Citation attribuée */
.quote {
  margin: var(--sp-6) 0;
  padding: var(--sp-5) var(--sp-6);
  background: var(--c-blue-wash);
  border-radius: 14px;
}
.quote p {
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--c-ink);
  margin-bottom: var(--sp-4);
}
.quote footer {
  font-family: var(--f-ui);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--c-muted);
}