/* =====================================================================
   DYS.MA — Systeme « Repere » (v2.1 · responsive robuste)
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Aucune déclaration ici : les variables viennent de
     static/css/design-system/tokens.css, source unique. */
  /* Jetons remontes de la coquille (dette n.2) : typo + mouvement. */
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--paper); color:var(--ink-700); overflow-x:clip;
  font-family:var(--font-body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; text-wrap:pretty;
}
h1, h2, h3, h4 { font-family:var(--font-head); font-weight:600; color:var(--ink-800); margin:0; line-height:1.12; letter-spacing:-.01em; }
p { margin:0; }
img, svg { display:block; max-width:100%; }
a { color:var(--em-700); text-decoration:none; }
a:hover { color:var(--em-800); }
.mono { font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }
.wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--edge); }

/* ---------- 3. Accessibilite ---------- */
*:focus-visible { outline:2.5px solid var(--em-600); outline-offset:3px; border-radius:2px; }
::selection { background:var(--em-200); color:var(--ink-800); }
.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; }
.skip-link { position:absolute; inset-inline-start:-9999px; top:8px; z-index:200; background:var(--ink-800); color:var(--paper); padding:10px 16px; border-radius:var(--r-sm); font-weight:700; }
.skip-link:focus { inset-inline-start:8px; color:var(--paper); }

/* ---------- 4. Boutons — SYSTEME UNIQUE DYS.MA ---------- */
/* Composant unique : base .btn + variantes fixes + tailles + etats.
   Aucun style inline, aucun override par page. Cible tactile >= 44px (WCAG AA). */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:12px 22px;
  font-family:var(--font-body); font-weight:700; font-size:15px; line-height:1.2;
  white-space:nowrap; text-decoration:none; cursor:pointer;
  border:1.5px solid transparent; border-radius:var(--r-sm);
  transition:transform .12s var(--f-ease), background .2s, border-color .2s, box-shadow .2s;
}
.btn:hover { text-decoration:none; }
.btn:active { transform:translateY(1px); }
.btn svg { width:17px; height:17px; flex:none; }
.btn:focus-visible { outline:2.5px solid var(--em-600); outline-offset:3px; }

/* Variantes */
.btn-primary { color:var(--c-06231a); background:linear-gradient(180deg, var(--em-500), var(--em-600)); box-shadow:0 8px 22px -10px rgba(23,179,127,.6); }
.btn-primary:hover { color:var(--c-06231a); background:linear-gradient(180deg, var(--em-400), var(--em-500)); transform:translateY(-1px); }
.btn-ink { color:var(--paper); background:var(--ink-700); }
.btn-ink:hover { color:var(--paper); background:var(--ink-800); }
.btn-secondary { color:var(--ink-700); background:var(--surface); border-color:var(--line-strong); }
.btn-secondary:hover { color:var(--ink-700); border-color:var(--ink-400); background:var(--surface-2); }
.btn-ghost { color:var(--em-700); background:transparent; padding-inline:12px; }
.btn-ghost:hover { background:var(--em-100); color:var(--em-800); }

/* Tailles */
.btn-sm { min-height:36px; padding:8px 14px; font-size:13px; }
.btn-lg { min-height:52px; padding:16px 28px; font-size:16px; }

/* Pleine largeur (remplace tout style inline width/justify) */
.btn-block { display:flex; width:100%; }
/* Lien-bouton discret aligne au debut (remplace le style inline de home) */
.link-more { align-self:flex-start; margin-block-start:var(--s3); }

/* Etat desactive : commun a toutes les variantes */
.btn:disabled, .btn[disabled], .btn.is-disabled {
  opacity:.5; cursor:not-allowed; box-shadow:none; transform:none; pointer-events:none;
}

/* Contextes sombres (.on-dark, .cta-final) : tout bouton reste LISIBLE.
   Les variantes pleines deviennent un bouton clair ; le contour s'eclaircit. */
.on-dark .btn-primary, .on-dark .btn-ink,
.cta-final .btn-primary, .cta-final .btn-ink {
  color:var(--em-900); background:var(--c-fbfaf6); box-shadow:none;
}
.on-dark .btn-primary:hover, .on-dark .btn-ink:hover,
.cta-final .btn-primary:hover, .cta-final .btn-ink:hover {
  color:var(--em-900); background:var(--c-ffffff);
}
.on-dark .btn-secondary, .cta-final .btn-secondary {
  color:var(--c-fbfaf6); background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28);
}
.on-dark .btn-secondary:hover, .cta-final .btn-secondary:hover {
  color:var(--c-fbfaf6); background:rgba(255,255,255,.14);
}
.on-dark .btn-ghost, .cta-final .btn-ghost { color:var(--c-eaf7f0); }
.on-dark .btn-ghost:hover, .cta-final .btn-ghost:hover { color:var(--c-ffffff); background:rgba(255,255,255,.12); }

/* ---------- 5. Tags ---------- */
.tag { display:inline-flex; align-items:center; padding:5px 12px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600; }
.tag-em { background:var(--em-100); color:var(--em-800); }
.tag-ink { background:var(--ink-100); color:var(--ink-600); }
.tag-am { background:var(--am-100); color:var(--am-700); }
.tag-solid { background:var(--ink-700); color:var(--paper); }
.tag-line { background:var(--surface); border:1px solid var(--line); color:var(--ink-600); }

/* ---------- 6. Champs ---------- */
.field label { display:block; font-size:13px; font-weight:600; color:var(--ink-500); margin-bottom:6px; }
.input { width:100%; font-family:var(--font-body); font-size:15px; color:var(--ink-700); background:var(--paper); border:1.5px solid var(--line-strong); border-radius:var(--r-sm); padding:11px 14px; transition:border-color .2s, background .2s; }
.input::placeholder { color:var(--ink-400); }
.input:hover { border-color:var(--ink-300); }
.input:focus-visible { border-color:var(--em-600); background:var(--surface); outline-offset:0; }

/* ---------- 7. Cartes ---------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s5); box-shadow:var(--sh-md); transition:transform .2s, box-shadow .2s; }
.card--lift:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); }
.card-ico { width:44px; height:44px; border-radius:var(--r-sm); margin-bottom:var(--s4); display:flex; align-items:center; justify-content:center; }
.card-ico--em { background:var(--em-100); color:var(--em-700); }
.card-ico--am { background:var(--am-100); color:var(--am-700); }
.card-ico--ink{ background:var(--ink-100); color:var(--ink-700); }
.card h4, .card h3 { font-size:20px; margin-bottom:var(--s2); }
.card p { font-size:14.5px; color:var(--ink-500); line-height:1.55; }
.choice { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; border-bottom:1px solid var(--line); color:inherit; transition:background .15s; }
.choice:last-child { border-bottom:0; }
.choice:hover { background:var(--em-100); color:inherit; }
.choice--primary { border-inline-start:4px solid var(--em-600); }
.choice .lbl { font-weight:700; font-size:15px; color:var(--ink-700); display:block; }
.choice .hint { font-size:12.5px; color:var(--ink-400); }
.choice .arw { color:var(--em-600); flex:none; }

/* ---------- 8. Progression ---------- */
.progress { height:10px; border-radius:var(--r-pill); background:var(--surface-2); overflow:hidden; }
.progress > span { display:block; height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg, var(--em-600), var(--em-400)); }

/* ---------- 9. Navigation (topbar robuste) ---------- */
.topbar { position:sticky; top:0; z-index:50; background:var(--surface); border-bottom:1px solid var(--line); }
.topbar-inner { position:relative; display:flex; align-items:center; gap:20px; height:68px; }
.brand { display:flex; align-items:center; gap:12px; font-family:var(--font-head); font-weight:600; font-size:22px; color:var(--ink-800); flex:0 0 auto; }
.brand .dot { color:var(--em-600); }

.nav-toggle { display:none; align-items:center; justify-content:center; padding:9px; }

.topbar-menu { display:flex; align-items:center; gap:20px; flex:1 1 auto; min-width:0; }
.nav-links { display:flex; gap:26px; flex:0 0 auto; }
.nav-links a { color:var(--ink-500); font-weight:600; font-size:14px; white-space:nowrap; }
.nav-links a:hover { color:var(--em-700); }

.search { position:relative; display:flex; align-items:center; flex:0 1 260px; margin-inline-start:auto; min-width:0; }
.search svg { position:absolute; inset-inline-start:11px; color:var(--ink-400); width:16px; height:16px; pointer-events:none; }
.search .input { width:100%; padding-inline-start:34px; }

.topbar-account { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.topbar-login { color:var(--ink-500); font-weight:600; font-size:14px; white-space:nowrap; }
.topbar-login:hover { color:var(--em-700); }

.lang-form { display:inline-flex; align-items:center; gap:6px; }
.lang {
  appearance:none; -webkit-appearance:none;
  border:1px solid var(--line-strong); border-radius:var(--r-sm);
  padding:6px 26px 6px 10px; font-size:13px; font-weight:700; color:var(--ink-600);
  background-color:transparent; cursor:pointer; line-height:1.2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A4E70' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; background-size:12px;
}
[dir="rtl"] .lang { padding:6px 10px 6px 26px; background-position:left 8px center; }
.lang:hover { border-color:var(--ink-400); color:var(--ink-700); }
.lang-go { padding:6px 12px; background-color:var(--surface-2); }
.topbar-cta { flex:0 0 auto; padding:9px 16px; white-space:nowrap; }

/* ---------- 10. Sections ---------- */
.section { padding-block:var(--s9); }
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:var(--s6); border-bottom:1px solid var(--line); padding-bottom:var(--s3); }
.kicker { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--em-700); }
.kicker .bar { width:22px; height:2px; background:var(--em-600); }
.grid { display:grid; gap:2px; }
.band { background:var(--surface-2); }

/* ---------- 11. Hero (desimbrique : wrap > hero-content) ---------- */
.hero { position:relative; overflow:hidden; background:radial-gradient(130% 120% at 88% -10%, var(--c-1b3a57) 0%, var(--ink-900) 58%); color:var(--c-fbfaf6); }
.hero .trace { position:absolute; inset-inline-end:0; top:0; height:100%; width:50%; opacity:.9; pointer-events:none; }
.hero-content { position:relative; max-width:640px; padding-block:clamp(40px,6vw,88px); }
.hero .kicker { color:var(--em-300); }
.hero .kicker .bar { background:var(--em-400); }
.hero h1 { color:var(--c-fbfaf6); font-size:clamp(36px,5.2vw,64px); line-height:1.04; margin:var(--s4) 0; }
.hero .lead { font-size:18px; line-height:1.6; color:var(--ink-200); max-width:48ch; margin-bottom:var(--s5); }
.hero-cta { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; }
.hero-note { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-300); margin-top:var(--s4); }
.stats { display:flex; gap:var(--s7); margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid rgba(255,255,255,.12); flex-wrap:wrap; }
.stat-num { font-family:var(--font-head); font-weight:600; font-size:38px; color:var(--em-300); line-height:1; }
.stat-lbl { font-size:13px; color:var(--ink-300); font-weight:600; margin-top:4px; }
.trace-line { stroke-dasharray:900; stroke-dashoffset:900; animation:trace 3s .4s ease-out forwards; filter:drop-shadow(0 0 7px rgba(76,199,155,.55)); }
.trace-node-end { transform-origin:center; animation:pulseNode 3.2s 1.8s ease-in-out infinite; filter:drop-shadow(0 0 10px rgba(76,199,155,.8)); }
@keyframes trace { to { stroke-dashoffset:0; } }
@keyframes rise  { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes pulseNode { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.35); opacity:.7; } }
.reveal { opacity:0; transform:translateY(14px); }
.reveal.is-in { animation:rise .7s ease-out forwards; }

/* ---------- 12. Reassurance ---------- */
.trust { display:flex; flex-wrap:wrap; align-items:center; gap:12px 32px; padding-block:18px; }
.trust-item { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--ink-600); }
.trust-item svg { width:18px; height:18px; color:var(--em-600); }

/* ---------- 13. Pied de page ---------- */
.footer { border-top:1px solid var(--line); padding-block:var(--s6); }
.footer-inner { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:var(--ink-400); font-size:13px; }

/* ---------- 14. CTA final ---------- */
.cta-final { background:radial-gradient(120% 140% at 15% 0%, var(--em-700) 0%, var(--em-900) 70%); color:var(--c-f0fbf6); border-radius:var(--r-lg); padding:clamp(36px,5vw,72px); }
.cta-final h2 { color:var(--c-f5fdf9); font-size:clamp(28px,4vw,48px); margin-bottom:var(--s3); }
.cta-final p { color:var(--em-200); font-size:18px; margin-bottom:var(--s5); }
/* CTA final : boutons geres par le systeme unique .cta-final .btn-* */

/* ---------- 15. Grilles utilitaires ---------- */
.cols-2 { grid-template-columns:repeat(2, 1fr); }
.cols-3 { grid-template-columns:repeat(3, 1fr); }
.cols-4 { grid-template-columns:repeat(4, 1fr); }
.grid-ruled { border:1px solid var(--line); background:var(--line); }
.grid-ruled > * { background:var(--paper); padding:clamp(22px,2.4vw,34px); }

/* ---------- 16. Responsive (points de rupture ordonnes) ---------- */
/* Laptop : recherche resserree */
@media (max-width:1200px) { .search { flex-basis:200px; } }

/* Tablette & mobile : bascule en panneau deroulant (point unique 960) */
@media (max-width:960px) {
  .nav-toggle { display:inline-flex; }
  .topbar-cta { margin-inline-start:auto; }
  .topbar-menu {
    position:absolute; inset-inline:0; top:100%;
    flex-direction:column; align-items:stretch; gap:14px;
    background:var(--surface); border:1px solid var(--line); border-top:0;
    border-radius:0 0 var(--r-md) var(--r-md); box-shadow:var(--sh-md);
    padding:16px var(--edge) 20px; display:none;
  }
  .topbar-inner.is-open .topbar-menu { display:flex; }
  .nav-links { flex-direction:column; gap:4px; }
  .nav-links a { padding-block:8px; font-size:15px; }
  .search { flex:none; margin-inline-start:0; width:100%; }
  .topbar-account { justify-content:space-between; padding-top:8px; border-top:1px solid var(--line); }
}

/* Grilles de contenu */
@media (max-width:900px) {
  .cols-3, .cols-4 { grid-template-columns:1fr 1fr; }
  .hero .trace { opacity:.35; }
  .hero-content { max-width:none; }
}
@media (max-width:640px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns:1fr; }
  .stats { gap:var(--s5); }
  .section { padding-block:var(--s8); }
  .topbar-cta { font-size:13px; padding:8px 12px; }
}

/* Ultra-large : trace bornee, colonne deja centree par --wrap */
@media (min-width:1600px) { .hero .trace { width:44%; } }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .trace-line { stroke-dashoffset:0; }
  .reveal { opacity:1; transform:none; }
}

/* ---------- F3a : socle unifie ---------- */
/* Marque vectorielle : plus aucun code couleur dans le gabarit. */
.brand-mark .bm-line { stroke: var(--ink-800); }
.brand-mark .bm-node { fill: var(--ink-600); }
.brand-mark .bm-node--end { fill: var(--em-600); }

/* Sprite d'icones : retire du flux sans attribut style= en gabarit. */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Marque du pied de page : taille propre, plus d'attribut style=. */
.footer-inner .brand { font-size: 16px; }

/* ---------- Pied institutionnel (socle public uniquement) ---------- */
.site-footer { margin-top:40px; border-top:1px solid var(--line); background:var(--surface); }
.site-footer-inner { padding-block:32px 18px; }

.sf-cols { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:20px 24px; }
/* Les liens se decalent sous leur intitule : la colonne se lit en un coup d'oeil. */
.sf-col ul { margin:0; padding:0; padding-inline-start:10px; list-style:none; }
.sf-col li + li { margin-top:6px; }

.sf-title {
  margin:0 0 8px; font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-400);
}

.sf-col a { display:inline-block; font-size:14px; line-height:1.45; color:var(--ink-500); text-decoration:none; }
.sf-col a:hover { color:var(--em-700); text-decoration:underline; }
.sf-col a:focus-visible { outline:2.5px solid var(--em-500); outline-offset:2px; }

.sf-base {
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
  margin-top:24px; padding-top:14px; border-top:1px solid var(--line);
  font-size:13px; color:var(--ink-400);
}

@media (max-width:860px) { .sf-cols { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:520px) { .sf-cols { grid-template-columns:minmax(0, 1fr); } }

/* ---------- Mises en forme issues d'anciens attributs style (une classe par declaration) ----------
   Triple classe : meme poids qu'un attribut en ligne face aux regles de page, sans !important. */
.sx-46cb8d.sx-46cb8d.sx-46cb8d { max-width:60ch;color:var(--ink-500);margin-block:var(--s3) var(--s6); }
.sx-3fa7d1.sx-3fa7d1.sx-3fa7d1 { gap:var(--s4); }
.sx-000848.sx-000848.sx-000848 { display:flex;flex-wrap:wrap;gap:var(--s3);margin-block-start:var(--s4); }
.sx-0171ac.sx-0171ac.sx-0171ac { display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-block-start:var(--s4); }
.sx-0fd999.sx-0fd999.sx-0fd999 { font-size:var(--f-t-sm);color:var(--ink-400);margin-block-start:var(--s3); }
.sx-ad118c.sx-ad118c.sx-ad118c { margin-block-start:var(--s4);display:grid;gap:var(--s3); }
.sx-e3a681.sx-e3a681.sx-e3a681 { margin-block-start:var(--s6); }
.sx-0c7ddb.sx-0c7ddb.sx-0c7ddb { display:flex;flex-wrap:wrap;gap:var(--s3); }
.sx-d09a7c.sx-d09a7c.sx-d09a7c { max-inline-size: 40rem; margin-inline: auto; }
.sx-2afd28.sx-2afd28.sx-2afd28 { margin-bottom:var(--s4); }
.sx-adc64d.sx-adc64d.sx-adc64d { margin-top:var(--s6); }
.sx-27039d.sx-27039d.sx-27039d { background:var(--am-100);color:var(--am-700);border-color:var(--am-300); }
.sx-bfd09c.sx-bfd09c.sx-bfd09c { font-size:20px;margin-bottom:var(--s4); }
.sx-968ef4.sx-968ef4.sx-968ef4 { margin-top:var(--s5); }
.sx-a2ed72.sx-a2ed72.sx-a2ed72 { margin-bottom:var(--s5); }
.sx-2dd92c.sx-2dd92c.sx-2dd92c { display:flex;flex-direction:column;gap:var(--s4); }
.sx-852a70.sx-852a70.sx-852a70 { transform-origin:560px 80px; }
.sx-1e7700.sx-1e7700.sx-1e7700 { border-block:1px solid var(--line); }
.sx-9ef590.sx-9ef590.sx-9ef590 { font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-400); }
.sx-acbb1c.sx-acbb1c.sx-acbb1c { padding-bottom:var(--s7); }
.sx-9c7c6b.sx-9c7c6b.sx-9c7c6b { font-size:clamp(26px,3vw,36px);margin:var(--s3) 0 var(--s6); }
.sx-260f5b.sx-260f5b.sx-260f5b { gap:var(--s5); }
.sx-41d7d7.sx-41d7d7.sx-41d7d7 { padding:0; }
.sx-2e4731.sx-2e4731.sx-2e4731 { padding:18px 20px; }
.sx-9e74db.sx-9e74db.sx-9e74db { padding-inline-end:20px; }
.sx-169676.sx-169676.sx-169676 { font-size:clamp(26px,3vw,34px); }
.sx-c4fd75.sx-c4fd75.sx-c4fd75 { color:var(--ink-400);font-size:14px; }
.sx-634f20.sx-634f20.sx-634f20 { display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:center; }
.sx-35a5a9.sx-35a5a9.sx-35a5a9 { font-size:clamp(26px,3vw,38px);margin-bottom:var(--s4); }
.sx-207533.sx-207533.sx-207533 { font-size:16px;line-height:1.6;color:var(--ink-500);max-width:46ch; }
.sx-18a152.sx-18a152.sx-18a152 { display:flex;flex-wrap:wrap;gap:10px; }
.sx-3a8390.sx-3a8390.sx-3a8390 { border-radius:var(--r-md);overflow:hidden; }
.sx-5bace4.sx-5bace4.sx-5bace4 { background:transparent;padding:0; }
.sx-6bdf9f.sx-6bdf9f.sx-6bdf9f { font-size:17px;margin:var(--s3) 0 6px; }
.sx-bdc23f.sx-bdc23f.sx-bdc23f { font-size:14px;color:var(--ink-500); }
.sx-4260eb.sx-4260eb.sx-4260eb { padding-top:0; }
.sx-9c8129.sx-9c8129.sx-9c8129 { font-size:18px;margin:var(--s3) 0 6px; }
.sx-48708e.sx-48708e.sx-48708e { font-size:clamp(26px,3vw,38px);margin:var(--s3) 0 var(--s4); }
.sx-c27a17.sx-c27a17.sx-c27a17 { gap:var(--s3); }
.sx-2b99ca.sx-2b99ca.sx-2b99ca { font-size:17px; }
.sx-f1a0eb.sx-f1a0eb.sx-f1a0eb { padding-top:var(--s8); }
.sx-4594a1.sx-4594a1.sx-4594a1 { padding-block:var(--s7) var(--s9); }
.sx-daeb0e.sx-daeb0e.sx-daeb0e { color:var(--ink-400); }
.sx-1524dd.sx-1524dd.sx-1524dd { margin-inline-end:5px; }
.sx-270f00.sx-270f00.sx-270f00 { margin-top:var(--s5);max-width:68ch; }
.sx-932f3e.sx-932f3e.sx-932f3e { margin-bottom:var(--s6); }
.sx-1444c6.sx-1444c6.sx-1444c6 { font-size:16px; }

/* Page publique des tarifs. */
.abo-pub{padding-block:32px}
.abo-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.abo-carte{border:1px solid var(--border,currentColor);border-radius:10px;padding:18px}