/* Feuille commune aux pages publiques servies en fichier statique
   (reseau.html, bon-de-reservation-vtc.html, et les suivantes).
 
   Elle était inlinée dans reseau.html tant qu'il n'y avait qu'une page. Le plan
   de référencement en prévoit une vingtaine : recopier six cents lignes de CSS
   dans chacune aurait garanti qu'elles finissent par diverger. Un seul fichier,
   mis en cache une fois pour toutes les pages.

   Ces pages vivent hors de l'application Angular : elles ne dépendent d'aucune
   de ses feuilles de style, et portent donc leur propre remise à zéro. */

  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: light dark; }
  body { margin: 0; }
  img { max-width: 100%; height: auto; }
  [hidden] { display: none !important; }

  /* ---------- Barre et pied du site ----------
     Ces pages sont servies en fichier statique, hors de l'application Angular :
     elles ne reçoivent donc ni sa barre ni son tiroir. Sans ces deux blocs,
     quelqu'un qui arrive ici depuis l'accueil n'a plus aucun chemin de retour —
     ni logo, ni connexion, ni page suivante. */

  .site-bar {
    background: var(--hero-bg);
    border-bottom: 1px solid var(--hero-rule);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }

  .site-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--hero-ink);
    font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -.01em;
  }
  /* Même hauteur que dans la barre de l'application : le logo porte le nom,
     il doit rester lisible. */
  .site-brand img { height: 40px; width: auto; display: block; }
  .site-brand:hover { color: #7FC9CF; }

  .site-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .site-nav a {
    font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    color: #9FBCBE;
    padding: 8px 12px;
    border-radius: 3px;
  }
  .site-nav a:hover { color: #E9F2F2; background: rgba(127, 201, 207, .1); }
  .site-nav a.site-cta {
    color: #06272B;
    background: #7FC9CF;
  }
  .site-nav a.site-cta:hover { background: #A8DDE1; }

  .site-foot {
    background: var(--hero-bg);
    border-top: 1px solid var(--hero-rule);
    padding: 24px;
    display: flex;
    justify-content: center;
    gap: 6px 20px;
    flex-wrap: wrap;
  }
  .site-foot a {
    font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    color: #9FBCBE;
    text-decoration: none;
  }
  .site-foot a:hover { color: #7FC9CF; text-decoration: underline; text-underline-offset: 3px; }

  .site-bar a:focus-visible,
  .site-foot a:focus-visible { outline: 2px solid #7FC9CF; outline-offset: 3px; }

  /* ---------- Figures ----------
     Deux schémas, deux mécanismes que la prose expliquait mal : ce qui franchit
     la limite entre les deux chauffeurs, et les chemins qu'une course confiée
     peut prendre. Le trait suit `currentColor` pour rester lisible dans les
     deux thèmes ; l'ambre est réservée à ce qui ne passe pas, qui est
     précisément l'argument de la page. */
  figure {
    margin: 36px 0 0;
    padding: 0;
  }
  figure svg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    color: var(--ink-2);
  }
  figcaption {
    margin-top: 14px;
    font-size: 14.5px;
    color: var(--ink-3);
    font-style: italic;
    text-align: center;
  }
  .figure-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .figure-scroll > svg { min-width: 520px; }

  /* ------------------------------------------------------------------
     Palette : dérivée des deux sources de marque de l'application —
     pétrole #0F6068 (couleur d'action) et ambre #B5730C (alerte).
     Les neutres sont biaisés vers le pétrole, jamais un gris pur.
     ------------------------------------------------------------------ */
  :root {
    --ground:      #EFF3F3;
    --surface:     #FFFFFF;
    --surface-2:   #E2EAEA;
    --ink:         #0E1F21;
    --ink-2:       #4C6265;
    --ink-3:       #7B9092;
    --rule:        #CCD9D9;
    --brand:       #0F6068;
    --brand-ink:   #0B484F;
    --amber:       #9A6109;
    --amber-bg:    #F6EBD8;
    --hero-bg:     #08282C;
    --hero-ink:    #E9F2F2;
    --hero-ink-2:  #9FBCBE;
    --hero-rule:   #1B4449;
    --good:        #2F6B4F;
    --shadow:      0 1px 2px rgba(8, 40, 44, .06), 0 8px 24px -12px rgba(8, 40, 44, .18);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground:    #071A1D;
      --surface:   #0C2428;
      --surface-2: #113035;
      --ink:       #E3EDED;
      --ink-2:     #9DB3B5;
      --ink-3:     #6E8688;
      --rule:      #1C4046;
      --brand:     #6DC3CA;
      --brand-ink: #8FD4D9;
      --amber:     #E3A845;
      --amber-bg:  #2A2113;
      --good:      #6FBF95;
      --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .7);
    }
  }

  :root[data-theme="dark"] {
    --ground:    #071A1D;
    --surface:   #0C2428;
    --surface-2: #113035;
    --ink:       #E3EDED;
    --ink-2:     #9DB3B5;
    --ink-3:     #6E8688;
    --rule:      #1C4046;
    --brand:     #6DC3CA;
    --brand-ink: #8FD4D9;
    --amber:     #E3A845;
    --amber-bg:  #2A2113;
    --good:      #6FBF95;
    --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .7);
  }

  /* ------------------------------------------------------------------ */

  body {
    background: var(--ground);
    color: var(--ink);
    font-family: "Newsreader", Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
  }

  .band { padding: 0 24px; }
  .col  { max-width: 660px; margin: 0 auto; }
  .col-wide { max-width: 940px; margin: 0 auto; }

  h1, h2, h3, .eyebrow, .num, .label, .btn {
    font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  }

  h1, h2, h3 { text-wrap: balance; margin: 0; }

  .eyebrow {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brand);
    margin: 0 0 20px;
  }

  /* ---------- Hero : bande unique, monde sombre assumé -------------- */

  .hero {
    background: var(--hero-bg);
    color: var(--hero-ink);
    padding: 88px 24px 76px;
    border-bottom: 1px solid var(--hero-rule);
  }
  .hero .eyebrow { color: #C58A2E; }
  .hero h1 {
    font-size: clamp(38px, 8vw, 66px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.028em;
  }
  .hero h1 .turn { display: block; color: #7FC9CF; }
  .hero .deck {
    font-size: clamp(18px, 2.6vw, 21px);
    color: var(--hero-ink-2);
    margin: 26px 0 0;
    max-width: 52ch;
  }
  .hero .sig {
    margin: 40px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--hero-rule);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12.5px;
    letter-spacing: .04em;
    color: var(--hero-ink-2);
    text-transform: uppercase;
  }

  /* ---------- Sections génériques ---------------------------------- */

  section.sheet { padding: 72px 24px; }
  section.sheet + section.sheet { border-top: 1px solid var(--rule); }
  section.alt { background: var(--surface); }

  h2 {
    font-size: clamp(26px, 4.4vw, 34px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.12;
  }
  h2 + .lede { margin-top: 18px; }
  .lede { font-size: 19px; color: var(--ink-2); margin: 0 0 6px; }
  p { margin: 0 0 18px; }
  p:last-child { margin-bottom: 0; }
  strong { font-weight: 600; color: var(--ink); }
  em.q { font-style: italic; color: var(--ink-2); }

  /* ---------- Avant / après ---------------------------------------- */

  .compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 38px;
  }
  .pane {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 26px 24px 28px;
  }
  section.alt .pane { background: var(--ground); }
  .pane .label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .pane.before .label { color: var(--ink-3); }
  .pane.after  .label { color: var(--brand); }
  .pane .label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: .3;
  }
  .pane ul { list-style: none; margin: 0; padding: 0; }
  .pane li {
    font-size: 16px;
    line-height: 1.5;
    padding: 11px 0 11px 22px;
    position: relative;
    border-bottom: 1px solid var(--rule);
  }
  .pane li:last-child { border-bottom: 0; padding-bottom: 0; }
  .pane.before li { color: var(--ink-2); }
  .pane.before li::before {
    content: "×";
    position: absolute;
    left: 0;
    top: 10px;
    font-family: "Archivo", sans-serif;
    color: var(--ink-3);
  }
  .pane.after li::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 20px;
    width: 9px;
    height: 9px;
    background: var(--brand);
  }

  /* ---------- Les étapes : une vraie séquence ---------------------- */

  .steps { margin-top: 40px; display: flex; flex-direction: column; gap: 0; }
  .step {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 20px;
    padding: 26px 0;
    border-top: 1px solid var(--rule);
  }
  .step:last-child { border-bottom: 1px solid var(--rule); }
  .num {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand);
    letter-spacing: .06em;
    padding-top: 5px;
  }
  .step h3 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.012em;
    margin-bottom: 7px;
  }
  .step p { font-size: 16.5px; color: var(--ink-2); margin: 0; }

  /* ---------- Maquette du relevé ----------------------------------- */

  .mock {
    margin-top: 38px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  section.alt .mock { background: var(--ground); }
  .mock-head {
    padding: 15px 20px;
    border-bottom: 1px solid var(--rule);
    font-family: "Archivo", sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .acct { padding: 18px 20px; border-bottom: 1px solid var(--rule); }
  .acct:last-child { border-bottom: 0; }
  .acct-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
  }
  .acct-name {
    font-family: "Archivo", sans-serif;
    font-weight: 600;
    font-size: 16px;
  }
  .acct-sum {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
  }
  .owed  { color: var(--good); }
  .owing { color: var(--amber); }
  .acct-dir {
    font-family: "Archivo", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3);
    display: block;
    margin-top: 2px;
  }
  .lines { list-style: none; margin: 14px 0 0; padding: 0; }
  .lines li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: baseline;
    padding: 8px 0;
    border-top: 1px dashed var(--rule);
    font-size: 15px;
  }
  .lines .who { font-weight: 500; }
  .lines .where {
    display: block;
    font-size: 13.5px;
    color: var(--ink-3);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    letter-spacing: -.01em;
    margin-top: 1px;
  }
  .lines .amt {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    white-space: nowrap;
  }
  .mock-foot {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 20px;
    background: var(--surface-2);
    border-top: 1px solid var(--rule);
  }
  .btn {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 8px 15px;
    border-radius: 3px;
    border: 1px solid var(--brand);
    color: var(--brand);
    background: transparent;
  }
  .btn.solid { background: var(--brand); color: var(--surface); border-color: var(--brand); }
  :root[data-theme="dark"] .btn.solid { color: #06272B; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn.solid { color: #06272B; }
  }
  .caption {
    font-size: 14.5px;
    color: var(--ink-3);
    margin-top: 14px;
    font-style: italic;
  }

  /* ---------- Vu / pas vu ------------------------------------------ */

  .split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0;
    margin-top: 36px;
    border: 1px solid var(--rule);
    border-radius: 3px;
    overflow: hidden;
  }
  .half { padding: 24px; background: var(--surface); }
  section.alt .half { background: var(--ground); }
  .half + .half { border-left: 1px solid var(--rule); }
  @media (max-width: 560px) {
    .half + .half { border-left: 0; border-top: 1px solid var(--rule); }
  }
  .half h3 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .half.yes h3 { color: var(--brand); }
  .half.no  h3 { color: var(--amber); }
  .half ul { list-style: none; margin: 0; padding: 0; }
  .half li { font-size: 16px; padding: 7px 0; color: var(--ink-2); }
  .half.no li { text-decoration: line-through; text-decoration-color: var(--ink-3); text-decoration-thickness: 1px; }

  .aside {
    margin-top: 26px;
    padding: 18px 20px;
    background: var(--amber-bg);
    border-left: 3px solid var(--amber);
    border-radius: 0 3px 3px 0;
  }
  .aside p { font-size: 16px; margin: 0; color: var(--ink); }
  /* La limite n'est pas un avertissement : elle se pose en retrait, sur le gris
     du texte courant, pour être lue comme une précision et non comme une alerte. */
  .aside.limite {
    background: transparent;
    border-left-color: var(--ink-3);
  }
  .aside.limite p { color: var(--ink-2); }

  /* ---------- Garde-fous ------------------------------------------- */

  .rules { margin-top: 34px; display: flex; flex-direction: column; gap: 22px; }
  .rule-item { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
  .tick {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--brand);
    background: var(--surface-2);
    padding: 5px 9px;
    border-radius: 3px;
    white-space: nowrap;
    margin-top: 2px;
  }
  .rule-item h3 { font-size: 17px; font-weight: 700; margin-bottom: 5px; }
  .rule-item p { font-size: 16px; color: var(--ink-2); margin: 0; }

  /* ---------- Le reste --------------------------------------------- */

  .rest {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: 3px;
    overflow: hidden;
  }
  .tile { background: var(--surface); padding: 20px; }
  section.alt .tile { background: var(--ground); }
  .tile h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 5px; }
  .tile p { font-size: 15px; color: var(--ink-2); margin: 0; }

  /* ---------- Clôture ---------------------------------------------- */

  .close {
    background: var(--hero-bg);
    color: var(--hero-ink);
    padding: 76px 24px 68px;
  }
  .close h2 { font-size: clamp(26px, 5vw, 38px); }
  .close p { color: var(--hero-ink-2); font-size: 18px; margin-top: 18px; }
  .close a { color: #7FC9CF; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .close a:hover { color: #A8DDE1; }
  .close .fine {
    margin-top: 34px;
    padding-top: 20px;
    border-top: 1px solid var(--hero-rule);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
    line-height: 1.7;
    letter-spacing: .02em;
    color: #74999C;
    text-transform: none;
  }

  a:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
  }

  /* ---------- Entrée : une seule séquence, à l'ouverture ----------- */

  .rise { animation: rise .7s cubic-bezier(.2, .7, .3, 1) backwards; }
  .rise:nth-child(1) { animation-delay: .05s; }
  .rise:nth-child(2) { animation-delay: .13s; }
  .rise:nth-child(3) { animation-delay: .21s; }
  .rise:nth-child(4) { animation-delay: .29s; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .rise { animation: none; }
  }

  /* ---------- Bloc de référencement --------------------------------
     Le vocabulaire par lequel on cherche le sujet, posé en fin de page.
     Volontairement en retrait : il sert un lecteur venu d'un moteur, pas
     celui qui vient de lire toute la page. */

  section.seo { background: var(--surface-2); }
  section.seo h2 {
    font-size: clamp(21px, 3vw, 26px);
    color: var(--ink-2);
  }
  section.seo h3 {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--ink);
    margin: 26px 0 8px;
  }
  /* Le titre du bloc introduit tout ce qui suit : il lui faut plus d'air que
     n'en séparent deux sous-titres, sinon il se lit comme l'un d'eux. */
  section.seo h2 + h3 { margin-top: 34px; }
  section.seo p {
    font-size: 15.5px;
    color: var(--ink-2);
    line-height: 1.58;
  }
  section.seo a { color: var(--brand-ink); }

  /* ---------- Pages engendrées : glossaire et articles ---------------
     Ces blocs servaient dans un <style> propre à chaque page produite.
     Ils vivent ici depuis qu'ils sont partagés par dix-sept pages. */

  .retenir {
    margin-top: 30px;
    padding: 18px 20px;
    background: var(--amber-bg);
    border-left: 3px solid var(--amber);
    border-radius: 0 3px 3px 0;
  }
  .retenir p { margin: 0; font-size: 16.5px; color: var(--ink); }
  .retenir .label {
    display: block;
    font-family: "Archivo", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 8px;
  }

  .renvois { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 8px; }
  .renvois a {
    font-family: "Archivo", sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 14px;
    border: 1px solid var(--rule);
    border-radius: 3px;
    color: var(--brand-ink);
    text-decoration: none;
  }
  .renvois a:hover { border-color: var(--brand); }

  .index { margin-top: 34px; display: grid; gap: 2px; }
  /* Sur un sommaire, la liste est le premier contenu de la section : la marge
     s'ajouterait au rembourrage de la section et creuserait un vide. */
  .index:first-child { margin-top: 0; }
  .index a {
    display: block;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 3px;
    text-decoration: none;
  }
  .index a:hover { border-color: var(--brand); }
  .index .mot {
    font-family: "Archivo", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 5px;
  }
  .index .quoi { font-size: 15.5px; color: var(--ink-2); margin: 0; }

  .sources { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--rule); }
  .sources h3 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 12px;
  }
  .sources ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
  .sources li { font-size: 14.5px; color: var(--ink-2); }
  .sources a { color: var(--brand-ink); }

  .maj {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 26px;
  }

  /* Une date qui compte : l'échéance mise en avant en tête d'article. */
  /* En ligne et non en `flex` : le contenu est une phrase, et un conteneur
     flex en ferait autant d'éléments séparés que de fragments de texte, avec
     des trous entre eux. */
  .echeance {
    display: inline-block;
    margin-top: 26px;
    line-height: 1.7;
    padding: 10px 16px;
    background: var(--surface-2);
    border: 1px solid var(--rule);
    border-radius: 3px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 13px;
    color: var(--ink-2);
  }
  .echeance b { color: var(--brand); font-weight: 700; }

  /* ---------- Nouveautés --------------------------------------------
     Une entrée par changement qui compte pour un chauffeur. La date se
     porte sur l'entrée et jamais sur la page : un « dernière mise à jour »
     périmé dit exactement ce que la page voulait démentir. */

  .nouveautes { margin-top: 8px; }

  .nouveaute {
    padding: 30px 0;
    border-top: 1px solid var(--rule);
  }
  .nouveaute:last-child { border-bottom: 1px solid var(--rule); }

  .nouveaute .quand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
  }
  .nouveaute .date {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .nouveaute .genre {
    font-family: "Archivo", sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 2px;
    background: var(--surface-2);
    color: var(--ink-2);
  }
  /* Un jalon de version se voit d'un coup d'œil : c'est le seul repère pour
     quelqu'un qui revient après plusieurs mois. */
  .nouveaute .genre.version {
    background: var(--brand);
    color: light-dark(#FFFFFF, #04181B);
  }
  .nouveaute .genre.reglementation { background: var(--amber-bg); color: var(--amber); }
  .nouveaute .genre.nouveaute      { background: var(--surface); color: var(--brand); border: 1px solid var(--brand); }

  .nouveaute h2 {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.012em;
    margin: 0 0 10px;
  }
  .nouveaute p { font-size: 16.5px; color: var(--ink-2); margin: 0; }
  .nouveaute .suite {
    display: inline-block;
    margin-top: 14px;
    font-family: "Archivo", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-ink);
  }