/* ============================================================
   Aruba Bet Casino — feuille de style unique
   Echelles : TYPO-04 / SPACE-03 / CONT-05 / BP-10 / GEO-05
   Composition d'en-tete : HEAD-PILL (barre flottante arrondie)
   Strategie de collage : fixe en haut (body decale par --shell-h)
   ============================================================ */

/* --- Polices auto-hebergees (aucun appel vers un hote tiers) --- */
@font-face {
  font-display: swap;
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  src: url("/caractere/lato-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-display: swap;
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  src: url("/caractere/lato-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-display: swap;
  font-family: "Lato";
  font-style: normal;
  font-weight: 600 700;
  src: url("/caractere/lato-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-display: swap;
  font-family: "Lato";
  font-style: normal;
  font-weight: 600 700;
  src: url("/caractere/lato-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-display: swap;
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400;
  src: url("/caractere/oswald-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-display: swap;
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400;
  src: url("/caractere/oswald-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-display: swap;
  font-family: "Oswald";
  font-style: normal;
  font-weight: 500;
  src: url("/caractere/oswald-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-display: swap;
  font-family: "Oswald";
  font-style: normal;
  font-weight: 500;
  src: url("/caractere/oswald-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-display: swap;
  font-family: "Oswald";
  font-style: normal;
  font-weight: 600;
  src: url("/caractere/oswald-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-display: swap;
  font-family: "Oswald";
  font-style: normal;
  font-weight: 600;
  src: url("/caractere/oswald-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Jetons de conception : noms propres a cette construction --- */
:root {
  --accent-strong: #000000;
  --anchor: #dec69c;
  --body: #ffffff;
  --border-strong: #4a505a;
  --both: cubic-bezier(0.63, 0.1, 0.48, 0.92);
  --bold: 3px;
  --compact: 1.25;
  --d-1: 0 1px 2px rgba(0, 0, 0, 0.05);
  --d-2: 0 2px 4px rgba(0, 0, 0, 0.06);
  --d-3: 0 4px 10px rgba(0, 0, 0, 0.08);
  --d-4: 0 10px 28px rgba(0, 0, 0, 0.12);
  --d-5: 0 20px 48px rgba(0, 0, 0, 0.16);
  --d-6: 0 26px 60px rgba(0, 0, 0, 0.2);
  --d-7: 0 32px 72px rgba(0, 0, 0, 0.24);
  --d-8: 0 40px 96px rgba(0, 0, 0, 0.28);
  --deep: #15181c;
  --display-1: 38px;
  --display-3: 24px;
  --e-open: 0.01em;
  --edge-wide: 64px;
  --even: 0;
  --exit: cubic-bezier(0.13, 0.78, 0.46, 0.97);
  --f-body: "Oswald", "Segoe UI", system-ui, sans-serif;
  --fade-top: #4d4d4d;
  --ground: #1d2024;
  --h-lg: 68px;
  --h4: 20px;
  --h5: 17px;
  --h6: 15px;
  --half: 500;
  --head: "Lato", "Segoe UI", system-ui, sans-serif;
  --heavy: 600;
  --in: cubic-bezier(0.63, 0.1, 0.48, 0.92);
  --ink: #121212;
  --long: 663ms;
  --lozenge: 9999px;
  --medium: 2px;
  --mid: 410ms;
  --open: 1.8;
  --orb: 50%;
  --overshoot: cubic-bezier(0.36, 1.2, 0.72, 1);
  --packed: 0;
  --padding-mobile: 20px;
  --padding-tablet: 32px;
  --page: 1260px;
  --quick: 232ms;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 10px;
  --r-4: 16px;
  --r-5: 28px;
  --r-6: 36px;
  --r-7: 44px;
  --r-8: 56px;
  --ramp-end: #2a2a2a;
  --raised: #24282e;
  --regular: 1.6;
  --s-1: 2px;
  --s-2: 6px;
  --s-3: 10px;
  --s-4: 14px;
  --s-5: 20px;
  --s-6: 28px;
  --s-7: 48px;
  --s-8: 72px;
  --sec-y: 48px;
  --shell-h: 90px;
  --size-mobile: 58px;
  --slim: 570px;
  --sm: 15px;
  --soft-text: #c1c1c1;
  --stroke: #343941;
  --text: 1260px;
  --thin: 1px;
  --tiny: 13px;
  --vivid: #121212;
  --w-regular: 400;
  --warn-band: #c81e1e;
  --xl-2: 30px;
  --z-body: 17px;
}

/* --- Reduction de l'echelle typographique sur petits ecrans --- */
@media (max-width: 831px) {
  :root {
    --display-1: 28px;
    --display-3: 20px;
    --edge-wide: var(--padding-mobile);
    --h4: 18px;
    --h5: 16px;
    --h6: 14px;
    --s-7: 34px;
    --sec-y: 34px;
    --sm: 14px;
    --tiny: 12px;
    --xl-2: 24px;
    --z-body: 16px;
  }
}
@media (min-width: 832px) and (max-width: 1135px) {
  :root {
    --edge-wide: var(--padding-tablet);
  }
}

/* --- Remise a zero et base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  overflow-x: clip;
}
html {
  background: var(--ground);
  scroll-behavior: smooth;
}
body {
  background: var(--ground);
  color: var(--body);
  display: flex;
  flex-direction: column;
  font-family: var(--f-body);
  font-size: var(--z-body);
  font-weight: var(--w-regular);
  letter-spacing: var(--even);
  line-height: var(--open);
  margin: 0;
  min-height: 100vh;
  padding-block-start: var(--shell-h, 90px);
}
h1,
h2,
h3 {
  color: var(--body);
  font-family: var(--head);
  font-weight: var(--heavy);
  letter-spacing: var(--even);
  line-height: var(--compact);
  margin: 0;
  overflow-wrap: anywhere;
}
h4,
h5,
h6 {
  color: var(--body);
  font-family: var(--f-body);
  font-weight: var(--half);
  letter-spacing: var(--even);
  line-height: var(--compact);
  margin: 0;
  overflow-wrap: anywhere;
}
h1 {
  font-size: var(--display-1);
}
h2 {
  font-size: var(--xl-2);
}
h3 {
  font-size: var(--display-3);
}
p {
  margin: 0;
}
img {
  max-width: 100%;
}
ul,
ol {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
table {
  border-collapse: collapse;
}
button {
  font-family: inherit;
}
[id] {
  scroll-margin-block-start: calc(var(--shell-h, 90px) + 18px);
}

/* --- Accessibilite --- */
.skip-jump {
  background: var(--anchor);
  border-radius: var(--r-3);
  color: var(--ink);
  font-family: var(--head);
  font-weight: var(--heavy);
  inset-inline-start: var(--s-5);
  padding: var(--s-3) var(--s-5);
  position: fixed;
  text-decoration: none;
  top: var(--s-3);
  z-index: 200;
}
.skip-jump:not(:focus) {
  top: -200px !important;
}
.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.corps {
  display: block;
  flex: 1 0 auto;
}
:focus-visible {
  outline: var(--medium) solid var(--anchor);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* ============================================================
   HEAD-PILL — barre flottante arrondie, fixee en haut
   Le rembourrage vertical appartient a <header> : le contenu
   ne peut donc pas defiler dans l'espace au-dessus de la pilule.
   ============================================================ */
.seuil {
  background: var(--ground);
  inset-block-start: 0;
  inset-inline: 0;
  padding-block: 10px;
  padding-inline: var(--s-5);
  position: fixed;
  z-index: 100;
}
.seuil-bar {
  align-items: center;
  background: var(--deep);
  border: var(--thin) solid var(--stroke);
  border-radius: var(--lozenge);
  box-shadow: var(--d-4);
  color: var(--body);
  display: flex;
  gap: var(--s-5);
  height: 68px;
  margin-inline: auto;
  max-width: 1440px;
  padding-inline: var(--s-5);
}
.seuil-mark {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
  text-decoration: none;
}
.seuil-img {
  display: block;
  flex-shrink: 0;
  height: 60px;
  width: auto;
}
.seuil-menu-opener {
  align-items: center;
  background: var(--deep);
  border: var(--thin) solid var(--border-strong);
  border-radius: var(--lozenge);
  color: var(--body);
  cursor: pointer;
  display: none;
  height: 44px;
  justify-content: center;
  min-width: 46px;
  padding: 0;
}
.seuil-lines {
  display: block;
  height: 2px;
  position: relative;
  width: 20px;
}
.seuil-lines::before,
.seuil-lines::after {
  background: var(--anchor);
  content: "";
  height: 2px;
  inset-inline: 0;
  position: absolute;
}
.seuil-lines::before {
  top: -4px;
}
.seuil-lines::after {
  top: 4px;
}
/* La barre ne comprime PAS le menu : c'est le repli « priority+ » qui
   decide ce qui tient. Et pas d'overflow:hidden sur la liste — la liste
   « Plus » vit dedans et serait rognee (A-25). */
.seuil-nav {
  flex: 0 0 auto;
}
.seuil-roll {
  align-items: center;
  display: flex;
  gap: var(--s-5);
}
.seuil-cell {
  flex: 0 0 auto;
}
.seuil-cell[hidden] {
  display: none;
}
.seuil-href {
  background: var(--deep);
  color: var(--body);
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: var(--even);
  padding-block: var(--s-3);
  text-decoration: none;
  text-transform: none;
  transition: color var(--quick) var(--exit), transform var(--quick) var(--exit);
  white-space: nowrap;
}
.seuil-href:hover {
  background: var(--deep);
  color: var(--anchor);
  transform: translateY(-2px);
}
.seuil-href[aria-current="page"] {
  background: var(--deep);
  color: var(--anchor);
}
.seuil-more {
  position: relative;
}
.seuil-more-opener {
  align-items: center;
  background: var(--deep);
  border: var(--thin) solid var(--border-strong);
  border-radius: var(--lozenge);
  color: var(--body);
  cursor: pointer;
  display: flex;
  height: 44px;
  justify-content: center;
  min-width: 44px;
  padding: 0;
}
.seuil-dots {
  background: var(--anchor);
  border-radius: var(--orb);
  display: block;
  height: 4px;
  position: relative;
  width: 4px;
}
.seuil-dots::before,
.seuil-dots::after {
  background: var(--anchor);
  border-radius: var(--orb);
  content: "";
  height: 4px;
  position: absolute;
  top: 0;
  width: 4px;
}
.seuil-dots::before {
  left: -7px;
}
.seuil-dots::after {
  left: 7px;
}
.seuil-more-pane {
  background: var(--deep);
  border: var(--thin) solid var(--border-strong);
  border-radius: var(--r-4);
  box-shadow: var(--d-5);
  display: none;
  inset-block-start: calc(100% + 10px);
  inset-inline-end: 0;
  max-height: 68vh;
  min-width: 220px;
  overflow-y: auto;
  padding: var(--s-3);
  position: absolute;
  z-index: 120;
}
.seuil-more-pane.is-open {
  display: block;
}
.seuil-more-pane .seuil-cell {
  display: block;
}
.seuil-more-pane .seuil-href {
  display: block;
  padding: var(--s-3) var(--s-4);
}
.seuil-buttons {
  display: flex;
  flex-shrink: 0;
  gap: var(--s-3);
  margin-inline-start: auto;
}
.seuil-hook {
  flex-shrink: 0;
  white-space: nowrap;
}
/* Page « jeu responsable » : aucun bouton d'offre, pas meme dans l'en-tete
   (TZ/12 §4). Sans le bloc de boutons, c'est au menu — puis a la poignee sur
   petit ecran — de recuperer l'espace libre et de se caler a droite. */
.seuil-bar:not(:has(.seuil-buttons)) .seuil-nav {
  margin-inline-start: auto;
}
.seuil-tray {
  background: var(--deep);
  border: var(--thin) solid var(--stroke);
  border-radius: var(--r-5);
  box-shadow: var(--d-5);
  display: none;
  margin-block-start: var(--s-3);
  margin-inline: auto;
  max-width: 1440px;
  padding: var(--s-4);
}
.seuil-tray.is-open {
  display: block;
}
.seuil-tray-roll {
  display: flex;
  flex-direction: column;
}
.seuil-tray-cell {
  display: block;
}
.seuil-tray-href {
  background: var(--deep);
  color: var(--body);
  display: block;
  font-size: var(--z-body);
  min-height: 46px;
  padding: var(--s-3) var(--s-4);
  text-decoration: none;
}
.seuil-tray-href[aria-current="page"] {
  background: var(--deep);
  color: var(--anchor);
}

/* --- Bandeau 18+ (RG-02) : juste sous l'en-tete, dans le flux --- */
.rg-strip {
  background: var(--warn-band);
  color: #ffffff;
  display: block;
  font-size: var(--tiny);
  letter-spacing: var(--e-open);
  line-height: 1.45;
  padding: var(--s-3) var(--padding-mobile);
  text-align: center;
}
.rg-strip-href {
  background: var(--warn-band);
  color: #ffffff;
  display: inline-block;
  min-height: 24px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================
   BREAD-06 — bandeau de fond pleine largeur
   ============================================================ */
.vitrine {
  background: var(--raised);
  border-block-end: var(--thin) solid var(--stroke);
  color: var(--soft-text);
  display: block;
  padding-block: var(--s-3);
}
.vitrine-wrap {
  display: block;
  margin-inline: auto;
  max-width: calc(var(--page) + 2 * var(--edge-wide));
  padding-inline: var(--edge-wide);
  width: 100%;
}
.vitrine-roll {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.vitrine-cell {
  color: var(--soft-text);
  font-size: var(--sm);
}
.vitrine-cell + .vitrine-cell::before {
  content: "› ";
  margin-inline-end: var(--s-2);
}
.vitrine-cell--here {
  background: var(--raised);
  color: var(--body);
}
.vitrine-href {
  background: var(--raised);
  color: var(--anchor);
  text-decoration: none;
}
.vitrine-href:hover {
  background: var(--raised);
  color: var(--body);
  text-decoration: underline;
}

/* ============================================================
   HERO-07 — tuile haute pleine largeur, texte en dessous
   ============================================================ */
.panneau {
  background: var(--ground);
  color: var(--body);
  display: block;
  padding-block: 0;
}
.panneau-figure {
  display: block;
  margin: 0;
  position: relative;
}
.panneau-figure::after {
  background: linear-gradient(180deg, rgba(29, 32, 36, 0) 40%, #1d2024 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.panneau-img {
  display: block;
  height: 400px;
  object-fit: cover;
  object-position: center;
  width: 100%;
}
.panneau-wrap {
  display: block;
  margin-inline: auto;
  max-width: calc(var(--page) + 2 * var(--edge-wide));
  padding-block: var(--s-7);
  padding-inline: var(--edge-wide);
  width: 100%;
}
.panneau-matter {
  display: block;
}
.panneau-sub {
  color: var(--soft-text);
  font-size: var(--h5);
  line-height: var(--open);
  margin-block-start: var(--s-5);
  max-width: var(--slim);
}
.panneau-hook {
  margin-block-start: var(--s-6);
}
.panneau-fine {
  color: var(--soft-text);
  display: block;
  font-size: var(--tiny);
  margin-block-start: var(--s-3);
  max-width: var(--slim);
}

/* ============================================================
   PHEAD-04 — en-tete de page a deux colonnes
   ============================================================ */
.brochure {
  background: var(--ground);
  color: var(--body);
  display: block;
  padding-block: var(--s-7);
}
.brochure-wrap {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  margin-inline: auto;
  max-width: calc(var(--page) + 2 * var(--edge-wide));
  padding-inline: var(--edge-wide);
  width: 100%;
}
.brochure-strip {
  display: block;
}
.brochure-strip--aside {
  align-self: end;
}
.brochure-chip {
  color: var(--anchor);
  display: block;
  font-size: var(--tiny);
  letter-spacing: var(--e-open);
  margin-block-end: var(--s-3);
  text-transform: uppercase;
}
.brochure-body {
  color: var(--soft-text);
  font-size: var(--z-body);
  line-height: var(--open);
}

/* ============================================================
   PROSE-21 — titres cales a droite, paragraphes a gauche
   ============================================================ */
.relief {
  background: var(--ground);
  color: var(--body);
  display: block;
  padding-block: var(--s-7);
}
.relief-wrap {
  display: block;
  margin-inline: auto;
  max-width: calc(var(--page) + 2 * var(--edge-wide));
  padding-inline: var(--edge-wide);
  width: 100%;
}
.relief-line {
  display: block;
}
.relief-line + .relief-line {
  margin-block-start: var(--s-6);
}
.relief-head {
  font-size: var(--xl-2);
  margin-block-end: var(--s-4);
  margin-block-start: var(--s-5);
  text-align: right;
}
.relief-head::after {
  background: var(--anchor);
  content: "";
  display: block;
  height: var(--medium);
  margin-block-start: var(--s-3);
  margin-inline-start: auto;
  width: 34%;
}
.relief-body {
  color: var(--soft-text);
  font-size: var(--z-body);
  line-height: var(--open);
}
.relief-body + .relief-body {
  margin-block-start: var(--s-4);
}
.relief-body a {
  background: var(--ground);
  color: var(--anchor);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--quick) var(--exit);
}
.relief-body a:hover {
  background: var(--ground);
  color: var(--anchor);
  text-decoration-thickness: 3px;
}
.relief-roll {
  display: block;
  margin-block-start: var(--s-4);
}
.relief-steps {
  counter-reset: pas;
  display: block;
  margin-block-start: var(--s-4);
}
.relief-cell {
  color: var(--soft-text);
  line-height: var(--open);
  padding-block: var(--s-2);
  padding-inline-start: var(--s-6);
  position: relative;
}
.relief-roll .relief-cell::before {
  background: var(--anchor);
  border-radius: var(--orb);
  content: "";
  height: 7px;
  inset-inline-start: var(--s-3);
  position: absolute;
  top: 16px;
  width: 7px;
}
.relief-steps .relief-cell {
  counter-increment: pas;
}
.relief-steps .relief-cell::before {
  color: var(--anchor);
  content: counter(pas) ".";
  font-family: var(--head);
  font-weight: var(--heavy);
  inset-inline-start: 0;
  position: absolute;
}
.relief-figure {
  display: block;
  margin: var(--s-5) 0;
  width: 100%;
}
.relief-shot {
  aspect-ratio: 16 / 9;
  border: var(--thin) solid var(--stroke);
  border-radius: var(--r-4);
  display: block;
  height: auto;
  max-height: 48vh;
  object-fit: cover;
  object-position: center;
  width: 100%;
}
.relief-hook {
  align-items: center;
  background: var(--ramp-end);
  border: var(--thin) solid var(--stroke);
  border-radius: var(--r-5);
  color: var(--body);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-block: var(--s-6);
  padding: var(--s-6);
}
.relief-act {
  flex-shrink: 0;
}
.relief-fine {
  background: var(--ramp-end);
  color: var(--soft-text);
  font-size: var(--tiny);
}

/* ============================================================
   GRID-13 — cartes avec icones choisies par le sens
   ============================================================ */
.salon {
  background: var(--ground);
  color: var(--body);
  display: block;
  padding-block: var(--s-7);
}
.salon-wrap {
  display: block;
  margin-inline: auto;
  max-width: calc(var(--page) + 2 * var(--edge-wide));
  padding-inline: var(--edge-wide);
  width: 100%;
}
.salon-head {
  margin-block-end: var(--s-6);
}
.salon-stack {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.salon-card {
  background: var(--raised);
  border: var(--thin) solid var(--stroke);
  border-radius: var(--r-5);
  color: var(--body);
  display: block;
  padding: var(--s-6);
  transition: background-color var(--mid) var(--exit);
}
.salon-card:hover {
  background: var(--ramp-end);
}
.salon-img {
  color: var(--anchor);
  display: block;
  fill: currentColor;
  height: 32px;
  width: 32px;
}
.salon-top {
  font-size: var(--h5);
  margin-block-start: var(--s-3);
}
.salon-body {
  color: var(--soft-text);
  font-size: var(--sm);
  line-height: var(--open);
  margin-block-start: var(--s-3);
}
.salon-card--hook {
  align-content: center;
  background: var(--ramp-end);
  border-color: var(--anchor);
  display: grid;
  gap: var(--s-4);
  justify-items: start;
}
.salon-chip {
  background: var(--ramp-end);
  color: var(--anchor);
  font-size: var(--tiny);
  letter-spacing: var(--e-open);
  text-transform: uppercase;
}
.salon-act {
  display: inline-flex;
}

/* ============================================================
   REV-06 — liste compacte avec notes en ligne
   ============================================================ */
.enseigne {
  background: var(--ground);
  color: var(--body);
  display: block;
  padding-block: var(--s-7);
}
.enseigne-wrap {
  display: block;
  margin-inline: auto;
  max-width: calc(var(--page) + 2 * var(--edge-wide));
  padding-inline: var(--edge-wide);
  width: 100%;
}
.enseigne-head {
  margin-block-end: var(--s-6);
}
.enseigne-roll {
  display: block;
}
.enseigne-cell {
  border-block-end: var(--thin) solid var(--stroke);
  display: block;
  padding-block: var(--s-4);
}
.enseigne-line {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.enseigne-who {
  color: var(--body);
  font-family: var(--head);
  font-size: var(--z-body);
  font-weight: var(--heavy);
}
.enseigne-score {
  background: var(--ground);
  color: var(--anchor);
  font-size: var(--sm);
  letter-spacing: var(--e-open);
}
.enseigne-date {
  background: var(--ground);
  color: var(--soft-text);
  font-size: var(--tiny);
  margin-inline-start: auto;
}
.enseigne-body {
  color: var(--soft-text);
  font-size: var(--z-body);
  line-height: var(--regular);
  margin: var(--s-3) 0 0;
}

/* ============================================================
   FAQ-03 — cartes sur deux colonnes
   ============================================================ */
.billet {
  background: var(--ground);
  color: var(--body);
  display: block;
  padding-block: var(--s-7);
}
.billet-wrap {
  display: block;
  margin-inline: auto;
  max-width: calc(var(--page) + 2 * var(--edge-wide));
  padding-inline: var(--edge-wide);
  width: 100%;
}
.billet-head {
  margin-block-end: var(--s-6);
}
.billet-stack {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.billet-card {
  background: var(--raised);
  border: var(--thin) solid var(--stroke);
  border-radius: var(--r-5);
  color: var(--body);
  padding: var(--s-6);
}
.billet-ask {
  cursor: pointer;
  display: block;
  list-style: none;
}
.billet-ask::-webkit-details-marker {
  display: none;
}
.billet-top {
  font-size: var(--h5);
}
.billet-top::before {
  color: var(--anchor);
  content: "Q. ";
  font-family: var(--head);
  font-weight: var(--heavy);
}
.billet-matter {
  display: block;
  margin-block-start: var(--s-4);
}
.billet-body {
  color: var(--soft-text);
  font-size: var(--z-body);
  line-height: var(--regular);
}
.billet-card--hook {
  align-content: center;
  background: var(--ramp-end);
  border-color: var(--anchor);
  display: grid;
  gap: var(--s-4);
  justify-items: start;
}
.billet-chip {
  background: var(--ramp-end);
  color: var(--anchor);
  font-size: var(--tiny);
  letter-spacing: var(--e-open);
  text-transform: uppercase;
}
.billet-act {
  display: inline-flex;
}

/* ============================================================
   TABLE-07 — colonnes alternees deux tons
   ============================================================ */
.arcade {
  background: var(--ground);
  color: var(--body);
  display: block;
  padding-block: var(--s-7);
}
.arcade-wrap {
  display: block;
  margin-inline: auto;
  max-width: calc(var(--page) + 2 * var(--edge-wide));
  padding-inline: var(--edge-wide);
  width: 100%;
}
.arcade-head {
  margin-block-end: var(--s-6);
}
.arcade-scroll {
  display: block;
  overflow-x: auto;
  width: 100%;
}
.arcade-grid {
  border: var(--thin) solid var(--stroke);
  border-radius: var(--r-4);
  min-width: 560px;
  overflow: hidden;
  width: 100%;
}
.arcade-grid th {
  background: var(--anchor);
  color: var(--ink);
  font-family: var(--head);
  font-size: var(--sm);
  font-weight: var(--heavy);
  padding: var(--s-4);
  text-align: start;
}
.arcade-grid td {
  background: var(--ground);
  overflow-wrap: anywhere;
  border-block-start: var(--thin) solid var(--stroke);
  color: var(--soft-text);
  font-size: var(--sm);
  line-height: var(--regular);
  padding: var(--s-4);
  vertical-align: top;
}
.arcade-grid td:nth-child(even) {
  background: var(--raised);
  color: var(--body);
}
.arcade-detail {
  color: var(--soft-text);
  display: block;
  font-size: var(--tiny);
  margin-block-start: var(--s-3);
}

/* ============================================================
   CTA-09 — surtitre, H2, texte court
   ============================================================ */
.placard {
  background: var(--ramp-end);
  border-block: var(--thin) solid var(--stroke);
  color: var(--body);
  display: block;
  padding-block: var(--s-7);
}
.placard-wrap {
  display: block;
  margin-inline: auto;
  max-width: calc(var(--page) + 2 * var(--edge-wide));
  padding-inline: var(--edge-wide);
  text-align: start;
  width: 100%;
}
.placard-chip {
  background: var(--ramp-end);
  color: var(--anchor);
  display: block;
  font-size: var(--tiny);
  letter-spacing: var(--e-open);
  margin-block-end: var(--s-2);
  text-transform: uppercase;
}
.placard-head {
  font-size: var(--xl-2);
}
.placard-body {
  background: var(--ramp-end);
  color: var(--soft-text);
  line-height: var(--open);
  margin-block: var(--s-4) var(--s-6);
  max-width: var(--slim);
}
.placard-hook {
  display: inline-flex;
}
.placard-fine {
  background: var(--ramp-end);
  color: var(--soft-text);
  display: block;
  font-size: var(--tiny);
  margin-block-start: var(--s-3);
  max-width: var(--slim);
}

/* ============================================================
   LEGAL-02 — sections numerotees par compteur CSS
   ============================================================ */
.pupitre {
  background: var(--ground);
  color: var(--body);
  display: block;
  padding-block: var(--s-7);
}
.pupitre-wrap {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  margin-inline: auto;
  max-width: calc(var(--page) + 2 * var(--edge-wide));
  padding-inline: var(--edge-wide);
  width: 100%;
}
.pupitre-matter {
  counter-reset: pupitre-part;
  display: block;
}
.pupitre-part {
  counter-increment: pupitre-part;
  display: block;
}
.pupitre-part + .pupitre-part {
  margin-block-start: var(--s-6);
}
.pupitre-top {
  font-size: var(--display-3);
}
.pupitre-top::before {
  color: var(--anchor);
  content: counter(pupitre-part) ". ";
  font-family: var(--head);
  font-weight: var(--heavy);
  margin-inline-end: var(--s-2);
}
.pupitre-body {
  color: var(--soft-text);
  line-height: var(--open);
  margin-block-start: var(--s-4);
  padding-inline-start: var(--s-4);
}
.pupitre-aside {
  align-self: start;
  background: var(--raised);
  border: var(--thin) solid var(--stroke);
  border-radius: var(--r-5);
  color: var(--body);
  padding: var(--s-6);
}
.pupitre-chip {
  background: var(--raised);
  color: var(--anchor);
  display: block;
  font-size: var(--tiny);
  letter-spacing: var(--e-open);
  margin-block-end: var(--s-4);
  text-transform: uppercase;
}
.pupitre-roll {
  display: block;
}
.pupitre-cell {
  color: var(--soft-text);
  font-size: var(--sm);
  line-height: var(--regular);
  padding-block: var(--s-3);
}
.pupitre-cell + .pupitre-cell {
  border-block-start: var(--thin) solid var(--stroke);
}
.pupitre-note {
  color: var(--soft-text);
  font-size: var(--sm);
  line-height: var(--regular);
  margin-block-start: var(--s-4);
}
.pupitre-detail {
  color: var(--soft-text);
  font-size: var(--tiny);
  margin-block-start: var(--s-3);
}

/* ============================================================
   FORM-06 — etiquettes flottantes
   ============================================================ */
.bureau {
  background: var(--ground);
  color: var(--body);
  display: block;
  padding-block: var(--s-7);
}
.bureau-wrap {
  display: block;
  margin-inline: auto;
  max-width: calc(var(--page) + 2 * var(--edge-wide));
  padding-inline: var(--edge-wide);
  width: 100%;
}
.bureau-body {
  color: var(--soft-text);
  line-height: var(--open);
  margin-block-end: var(--s-6);
}
.bureau-form {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bureau-entry {
  display: block;
  position: relative;
}
.bureau-entry--tall {
  grid-column: 1 / -1;
}
.bureau-in {
  background: var(--raised);
  border: var(--thin) solid var(--border-strong);
  border-radius: var(--r-4);
  color: var(--body);
  font-family: var(--f-body);
  font-size: var(--z-body);
  min-height: 62px;
  padding: var(--s-6) var(--s-4) var(--s-3);
  width: 100%;
}
.bureau-in--tall {
  min-height: 150px;
  resize: vertical;
}
.bureau-chip {
  color: var(--soft-text);
  font-size: var(--sm);
  inset-inline-start: var(--s-4);
  pointer-events: none;
  position: absolute;
  top: 20px;
  transition: font-size var(--quick) var(--exit), top var(--quick) var(--exit);
}
.bureau-in:focus + .bureau-chip,
.bureau-in:not(:placeholder-shown) + .bureau-chip {
  color: var(--anchor);
  font-size: var(--tiny);
  top: 8px;
}
.bureau-send {
  background: var(--anchor);
  border: 0;
  border-radius: var(--r-4);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--head);
  font-size: var(--sm);
  font-weight: var(--heavy);
  justify-self: start;
  min-height: 48px;
  padding: var(--s-3) var(--s-6);
  transition: background-color var(--quick) var(--exit);
}
.bureau-send:hover {
  background: #f0ddb8;
  color: var(--ink);
}
.bureau-words {
  background: var(--raised);
  border: var(--thin) solid var(--anchor);
  border-radius: var(--r-4);
  color: var(--body);
  margin-block-start: var(--s-5);
  padding: var(--s-5);
}

/* ============================================================
   AUTH-07 — carte auteur facon citation
   ============================================================ */
.repere {
  background: var(--ground);
  color: var(--body);
  display: block;
  padding-block: var(--s-7);
}
.repere-wrap {
  display: block;
  margin-inline: auto;
  max-width: calc(var(--page) + 2 * var(--edge-wide));
  padding-inline: var(--edge-wide);
  width: 100%;
}
.repere-card {
  background: var(--raised);
  border-inline-start: 4px solid var(--anchor);
  border-radius: var(--r-4);
  color: var(--body);
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 100px minmax(0, 1fr);
  padding: var(--s-6);
}
.repere-portrait {
  align-self: start;
  border-radius: var(--orb);
  display: block;
  height: 100px;
  object-fit: cover;
  object-position: center top;
  width: 100px;
}
.repere-matter {
  display: block;
}
.repere-quote {
  color: var(--anchor);
  display: block;
  font-family: var(--head);
  font-size: var(--display-1);
  line-height: 0.8;
}
.repere-body {
  color: var(--body);
  font-size: var(--h5);
  font-style: italic;
  line-height: var(--regular);
  margin-block-start: var(--s-3);
}
.repere-hat {
  color: var(--soft-text);
  font-size: var(--sm);
  letter-spacing: var(--e-open);
  margin-block-start: var(--s-4);
}
.repere-skills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-start: var(--s-5);
}
.repere-skill {
  background: var(--raised);
  border: var(--thin) solid var(--stroke);
  border-radius: var(--lozenge);
  color: var(--soft-text);
  font-size: var(--tiny);
  padding: var(--s-2) var(--s-4);
}
.repere-articles {
  display: block;
  margin-block-start: var(--s-6);
}
.repere-top {
  font-size: var(--h4);
}
.repere-roll {
  display: block;
  margin-block-start: var(--s-3);
}
.repere-cell {
  border-block-start: var(--thin) solid var(--stroke);
  color: var(--soft-text);
  font-size: var(--sm);
  padding-block: var(--s-3);
}

/* ============================================================
   BYLINE-02 — carte signee en fin d'article
   ============================================================ */
.lutrin {
  background: var(--ground);
  color: var(--body);
  display: block;
  padding-block: var(--s-5);
}
.lutrin-card {
  background: var(--raised);
  border: var(--thin) solid var(--stroke);
  border-radius: var(--r-4);
  color: var(--body);
  display: flex;
  gap: var(--s-4);
  margin-inline: auto;
  max-width: var(--slim);
  padding: var(--s-6);
}
.lutrin-portrait {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}
.lutrin-img {
  border-radius: var(--orb);
  display: block;
  height: 64px;
  object-fit: cover;
  object-position: center top;
  width: 64px;
}
.lutrin-matter {
  display: block;
}
.lutrin-chip {
  color: var(--soft-text);
  display: block;
  font-size: var(--tiny);
  letter-spacing: var(--e-open);
  text-transform: uppercase;
}
.lutrin-who {
  font-size: var(--h4);
  margin-block-start: var(--s-1);
}
.lutrin-who a {
  background: var(--raised);
  color: var(--body);
  text-decoration: none;
}
.lutrin-who a:hover {
  background: var(--raised);
  color: var(--anchor);
  text-decoration: underline;
}
.lutrin-hat {
  color: var(--soft-text);
  display: block;
  font-size: var(--sm);
  margin-block-start: var(--s-1);
}
.lutrin-bio {
  color: var(--soft-text);
  font-size: var(--sm);
  line-height: var(--regular);
  margin-block-start: var(--s-3);
}
.lutrin-detail {
  color: var(--soft-text);
  display: block;
  font-size: var(--tiny);
  margin-block-start: var(--s-3);
}
.lutrin-href {
  background: var(--raised);
  color: var(--anchor);
  display: inline-block;
  font-size: var(--sm);
  letter-spacing: var(--e-open);
  margin-block-start: var(--s-3);
  text-decoration: none;
  text-transform: uppercase;
}
.lutrin-href:hover {
  background: var(--raised);
  color: var(--body);
  text-decoration: underline;
}

/* ============================================================
   ERR-07 — fond a motif geometrique
   ============================================================ */
.linteau {
  background-color: var(--ground);
  background-image: linear-gradient(rgba(222, 198, 156, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(222, 198, 156, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  color: var(--body);
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--s-8);
}
.linteau-wrap {
  display: block;
  margin-inline: auto;
  max-width: calc(var(--page) + 2 * var(--edge-wide));
  padding-inline: var(--edge-wide);
  text-align: center;
  width: 100%;
}
.linteau-chip {
  background: var(--ground);
  color: var(--anchor);
  display: block;
  font-family: var(--head);
  font-size: var(--xl-2);
  letter-spacing: 0.12em;
}
.linteau-head {
  font-size: var(--display-1);
  margin-block: var(--s-4);
  margin-inline: auto;
  max-width: var(--slim);
}
.linteau-body {
  color: var(--soft-text);
  line-height: var(--open);
  margin-inline: auto;
  max-width: var(--slim);
}
.linteau-return {
  background: var(--anchor);
  border-radius: var(--r-4);
  color: var(--ink);
  display: inline-block;
  font-family: var(--head);
  font-weight: var(--heavy);
  margin-block-start: var(--s-6);
  min-height: 48px;
  padding: var(--s-4) var(--s-6);
  text-decoration: none;
}
.linteau-return:hover {
  background: #f0ddb8;
  color: var(--ink);
}

/* ============================================================
   FOOT-06 — pied « manifeste »
   ============================================================ */
.fiche {
  background: var(--deep);
  color: var(--body);
  display: block;
  padding-block: var(--s-8);
}
.fiche-base {
  display: block;
  margin-inline: auto;
  max-width: calc(var(--page) + 2 * var(--edge-wide));
  padding-inline: var(--edge-wide);
  width: 100%;
}
.fiche-manifesto {
  display: block;
  margin-inline: auto;
  max-width: var(--slim);
  text-align: center;
}
.fiche-shout {
  color: var(--body);
  font-size: var(--xl-2);
}
.fiche-hook {
  margin-block-start: var(--s-5);
}
.fiche-fine {
  background: var(--deep);
  color: var(--soft-text);
  display: block;
  font-size: var(--tiny);
  margin-block-start: var(--s-3);
}
.fiche-return {
  background: var(--deep);
  color: var(--anchor);
  display: inline-block;
  font-family: var(--head);
  font-size: var(--h5);
  letter-spacing: var(--e-open);
  margin-block-start: var(--s-5);
  min-height: 44px;
  text-decoration: underline;
  text-transform: uppercase;
}
.fiche-return:hover {
  background: var(--deep);
  color: var(--body);
}
.fiche-rule {
  background: rgba(255, 255, 255, 0.1);
  display: block;
  height: 1px;
  margin-block: var(--s-7);
}
.fiche-aside {
  align-items: start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-7);
  justify-content: space-between;
}
.fiche-mark {
  display: inline-block;
  line-height: 0;
}
.fiche-img {
  display: block;
  height: 72px;
  width: auto;
}
.fiche-nav,
.fiche-legal {
  display: block;
}
.fiche-chip {
  color: var(--soft-text);
  display: block;
  font-size: var(--tiny);
  letter-spacing: var(--e-open);
  margin-block-end: var(--s-3);
  text-transform: uppercase;
}
.fiche-roll {
  display: block;
}
.fiche-cell {
  display: block;
  padding-block: var(--s-2);
}
.fiche-href {
  background: var(--deep);
  color: var(--soft-text);
  font-size: var(--sm);
  text-decoration: none;
}
.fiche-href:hover {
  background: var(--deep);
  color: var(--anchor);
  text-decoration: underline;
}
.fiche-note {
  align-self: end;
  background: var(--deep);
  color: var(--soft-text);
  font-size: var(--tiny);
}

/* ============================================================
   COOK-02 — bandeau pleine largeur en bas
   ============================================================ */
.manchette {
  background: var(--anchor);
  border-block-start: var(--thin) solid rgba(255, 255, 255, 0.08);
  bottom: 0;
  color: var(--ink);
  left: 0;
  padding-block: var(--s-4);
  padding-inline: var(--edge-wide);
  position: fixed;
  right: 0;
  z-index: 90;
}
.manchette[hidden] {
  display: none;
}
.manchette-base {
  align-items: center;
  display: flex;
  gap: var(--s-4);
  justify-content: space-between;
  margin-inline: auto;
  max-width: calc(var(--page) + 2 * var(--edge-wide));
  width: 100%;
}
.manchette-words {
  background: var(--anchor);
  color: #2a2317;
  flex: 1 1 auto;
  font-size: var(--sm);
  line-height: 1.45;
}
.manchette-buttons {
  display: flex;
  flex-shrink: 0;
  gap: var(--s-3);
}
.manchette-approve {
  background: var(--vivid);
  border: 0;
  border-radius: var(--r-4);
  color: var(--anchor);
  cursor: pointer;
  font-family: var(--head);
  font-size: var(--sm);
  font-weight: var(--heavy);
  min-height: 44px;
  padding: var(--s-3) var(--s-6);
}
.manchette-approve:hover {
  background: #2c2c2c;
  color: var(--anchor);
}
.manchette-deny {
  background: #f3e7cf;
  border: var(--thin) solid #2a2317;
  border-radius: var(--r-4);
  color: #2a2317;
  cursor: pointer;
  font-family: var(--head);
  font-size: var(--sm);
  font-weight: var(--heavy);
  min-height: 44px;
  padding: var(--s-3) var(--s-6);
}
.manchette-deny:hover {
  background: #2a2317;
  color: #f3e7cf;
}

/* ============================================================
   Adaptations — strategie « desktop-first », BP-10
   ============================================================ */
@media (max-width: 1135px) {
  .salon-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .seuil-img {
    height: 52px;
  }
}

@media (max-width: 1039px) {
  .pupitre-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 899px) {
  .seuil-bar {
    gap: var(--s-3);
    height: 58px;
    padding-inline: var(--s-4);
  }
  .seuil-img {
    height: 42px;
  }
  .seuil-menu-opener {
    display: inline-flex;
    order: 3;
  }
  .seuil-bar:not(:has(.seuil-buttons)) .seuil-menu-opener {
    margin-inline-start: auto;
  }
  .seuil-nav {
    display: none;
  }
  .seuil-buttons {
    margin-inline-start: auto;
    order: 2;
  }
  .seuil-hook {
    font-size: 13px !important;
    padding-inline: 16px !important;
  }
}

@media (max-width: 831px) {
  .billet-stack,
  .bureau-form,
  .salon-stack {
    grid-template-columns: minmax(0, 1fr);
  }
  .brochure-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-5);
  }
  .panneau-img {
    height: 220px;
  }
  .relief-head {
    text-align: left;
  }
  .relief-head::after {
    margin-inline-end: auto;
    margin-inline-start: 0;
  }
  .repere-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .repere-portrait {
    height: 88px;
    width: 88px;
  }
  .lutrin-card {
    flex-direction: column;
  }
  .fiche-aside {
    gap: var(--s-5);
  }
  .fiche-img {
    height: 56px;
  }
  .enseigne-date {
    margin-inline-start: 0;
  }
  .pupitre-body {
    padding-inline-start: 0;
  }
}

@media (max-width: 720px) {
  .manchette,
  .manchette-base {
    font-size: 13px !important;
    gap: 8px !important;
    line-height: 1.35 !important;
  }
  .manchette {
    padding: 12px 14px !important;
  }
  .manchette-base {
    align-items: stretch;
    flex-direction: column;
  }
  .manchette-words {
    font-size: 13px !important;
  }
  .manchette-approve,
  .manchette-deny {
    font-size: 12px !important;
    min-height: 40px !important;
    padding: 8px 14px !important;
    white-space: normal;
  }
  .manchette-buttons {
    gap: 8px !important;
  }
}

@media (max-width: 519px) {
  .relief-hook {
    padding: var(--s-5);
  }
  /* Le tableau tient en entier : une colonne poussee hors de l'ecran par une
     largeur minimale passe inapercue, meme si la boite defile. */
  .arcade-grid {
    min-width: 0;
  }
  .arcade-grid td,
  .arcade-grid th {
    font-size: var(--tiny);
    padding: var(--s-3);
  }
  .seuil-hook {
    font-size: 12px !important;
    padding-inline: 12px !important;
  }
}

@media (max-width: 360px) {
  .seuil-img {
    height: 36px;
  }
  .arcade-grid td,
  .arcade-grid th {
    padding: var(--s-2);
  }
}

/* ============================================================
   Bouton d'offre — rendu par scripts/cta-style.mjs (couleur,
   forme et animation tirees du domaine). Deux retouches :
   les valeurs de reference (0.26s linear, courbe generique)
   passent par les jetons de cette construction, et l'anneau
   detache le bouton du fond sombre du site.
   ============================================================ */
.vignette-go{display:inline-flex;align-items:center;justify-content:center;padding:var(--s-4) var(--s-6);min-height:48px;border-radius:var(--r-4);font-weight:var(--heavy)}
.vignette-go{position:relative;
  background:#4F46E5;color:#FFFFFF;text-decoration:none;
  box-shadow:0 0 0 2px rgba(222,198,156,0.32);
  font-family:var(--head);font-size:var(--sm);
  transition:background var(--quick) var(--exit),color var(--quick) var(--exit);}
.vignette-go.vignette-go{color:#FFFFFF;text-decoration:none;}
.vignette-go:hover{background:#4338CA;color:#FFFFFF;animation:none}
.vignette-go.vignette-go:hover{color:#FFFFFF;text-decoration:none}
.vignette-go:hover::after{animation:none}
.vignette-go:active{background:#3730A3;color:#FFFFFF}
.vignette-go:focus-visible{outline:3px solid #FFFFFF;outline-offset:3px}
@keyframes vignette-pulse{0%,100%{transform:scaleX(0)}40%,60%{transform:scaleX(1)}}
.vignette-go::after{content:"";position:absolute;left:12%;right:12%;bottom:6px;height:3px;background:currentColor;opacity:.5;transform-origin:left;animation:vignette-pulse 1.3s var(--exit) infinite}
.panneau-hook.vignette-go::after,.placard-hook.vignette-go::after{animation-delay:-0.45s}
.fiche-hook.vignette-go::after{animation-delay:-0.8s}
@media (prefers-reduced-motion:reduce){.vignette-go,.vignette-go::after{animation:none!important;transition:none!important}}

/* Relais d'offre en fin de bloc « avis » — meme habillage que dans la prose. */
.enseigne-hook {
  align-items: center;
  background: var(--ramp-end);
  border: var(--thin) solid var(--stroke);
  border-radius: var(--r-5);
  color: var(--body);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-block-start: var(--s-6);
  padding: var(--s-6);
}
.enseigne-act {
  flex-shrink: 0;
}
.enseigne-fine {
  background: var(--ramp-end);
  color: var(--soft-text);
  font-size: var(--tiny);
}
.enseigne-act.vignette-go::after {
  animation-delay: -1.05s;
}

@media (max-width: 927px) {
  .seuil-nav,
  .seuil-roll,
  .seuil-href { display: none !important; }
  .seuil-menu-opener { display: flex !important; }
}