/* ============================================================
   Chicken Road FR — feuille de styles
   Palette calee sur le visuel de la premiere section :
   nuit bleue, flammes or, poules blanches.
   ============================================================ */

:root {
  --cr-bg: #091132;
  --cr-bg-2: #0d1740;
  --cr-card: #142053;
  --cr-card-2: #1b2b6b;
  --cr-line: #2a3d85;
  --cr-line-2: #3a53ad;
  --cr-gold: #ffc220;
  --cr-gold-2: #ffe066;
  --cr-fire: #ff6a1f;
  --cr-fire-2: #e8341c;
  --cr-green: #00b67a;
  --cr-text: #ffffff;
  --cr-muted: #a8b5da;
  --cr-shadow: 0 10px 34px rgba(0, 0, 0, .38);
  --cr-wrap: 1110px;
  --cr-grad: linear-gradient(90deg, var(--cr-fire) 0%, var(--cr-gold) 100%);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cr-bg);
  color: var(--cr-text);
  font: 400 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; border: 0; display: block; }
a { color: var(--cr-gold); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0 0 14px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(30px, 5.2vw, 52px); }
h2 { font-size: clamp(23px, 3.2vw, 32px); }
h3 { font-size: clamp(18px, 2.2vw, 21px); }
p { margin: 0 0 14px; }

[role="button"] { cursor: pointer; }
:focus-visible { outline: 3px solid var(--cr-gold); outline-offset: 2px; border-radius: 6px; }

.cr-wrap { width: 100%; max-width: var(--cr-wrap); margin: 0 auto; padding: 0 16px; }
.cr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------- Boutons ---------------- */
.cr-btn-gold, .cr-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 0 28px; border: 0; border-radius: 12px;
  font: 800 17px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-align: center; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.cr-btn-gold {
  background: linear-gradient(180deg, var(--cr-gold-2) 0%, var(--cr-gold) 55%, #f0a000 100%);
  color: #2a1500; box-shadow: 0 6px 0 #b87700, 0 12px 26px rgba(255, 160, 0, .32);
}
.cr-btn-gold:hover { transform: translateY(-2px); filter: brightness(1.06); text-decoration: none; }
.cr-btn-gold:active { transform: translateY(2px); box-shadow: 0 3px 0 #b87700; }
.cr-btn-ghost {
  background: rgba(255, 255, 255, .07); color: #fff;
  border: 2px solid var(--cr-line-2); box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.cr-btn-ghost:hover { background: rgba(255, 255, 255, .13); transform: translateY(-2px); text-decoration: none; }
.cr-btn-gold svg, .cr-btn-ghost svg { flex: 0 0 auto; }

/* ---------------- En-tete ---------------- */
.cr-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(9, 17, 50, .92);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--cr-line);
}
.cr-header__in {
  max-width: var(--cr-wrap); margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 16px;
}
.cr-logo img { width: 150px; height: 65px; object-fit: contain; }
.cr-nav { margin-left: auto; }
.cr-nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.cr-nav li span, .cr-nav li a { color: #fff; font-weight: 600; font-size: 15px; cursor: pointer; }
.cr-nav li span:hover, .cr-nav li a:hover { color: var(--cr-gold); }
.cr-header .cr-btn-gold { min-height: 44px; padding: 0 20px; font-size: 15px; }
/* la case sert uniquement d'etat au menu mobile : jamais visible */
.cr-toggle {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; margin: 0; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); appearance: none; -webkit-appearance: none;
}
.cr-burger { display: none; }

@media (max-width: 900px) {
  .cr-logo img { width: 118px; height: 51px; }
  .cr-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    order: 3; width: 42px; height: 42px; padding: 0 9px; margin-left: auto;
    background: var(--cr-card); border: 1px solid var(--cr-line); border-radius: 10px; cursor: pointer;
  }
  .cr-burger span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: .2s; }
  .cr-nav {
    order: 4; margin: 0; width: 100%; display: none;
    border-top: 1px solid var(--cr-line); padding-top: 12px;
  }
  .cr-toggle:checked ~ .cr-nav { display: block; }
  .cr-nav ul { flex-direction: column; gap: 14px; padding-bottom: 6px; }
  .cr-header .cr-btn-gold { order: 2; min-height: 40px; padding: 0 14px; font-size: 14px; }
}

/* ---------------- Premiere section ----------------
   Meme principe que le modele : l'image de fond occupe toute
   la section et reste cliquable, le texte vit dans une carte
   sombre posee au centre.                                     */
.cr-hero { position: relative; isolation: isolate; }
.cr-hero__bg {
  position: absolute; inset: 0; z-index: 0; display: block; cursor: pointer;
  background-image: url("../images/game/chicken-road-jeu-crash-banniere.webp");
  background-size: cover; background-position: center;
}
.cr-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 11, 34, .32) 0%, rgba(6, 11, 34, .10) 38%, rgba(9, 17, 50, .60) 74%, rgba(9, 17, 50, .97) 93%, var(--cr-bg) 100%);
}
.cr-hero__in {
  position: relative; z-index: 1; pointer-events: none;
  display: flex; justify-content: center;
  min-height: 520px; padding: 74px 16px 46px;
}
.cr-hero__card {
  pointer-events: auto; align-self: center;
  width: 100%; max-width: 660px; text-align: center;
  padding: 32px 34px 30px; border-radius: 20px;
  background: rgba(13, 23, 64, .93);
  border: 1px solid var(--cr-line-2);
  box-shadow: 0 18px 54px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.cr-hero h1 {
  margin-bottom: 12px;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .30);
  background: linear-gradient(180deg, #fff 42%, var(--cr-gold-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cr-hero__sub { font-size: clamp(15px, 1.9vw, 17px); color: #d9e2ff; margin: 0 auto 14px; }
.cr-hero__stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none;
}
.cr-hero__stats li {
  background: rgba(9, 17, 50, .8); border: 1px solid var(--cr-line-2); border-radius: 999px;
  padding: 6px 13px; font-size: 13.5px; font-weight: 700;
}
.cr-hero__stats b { color: var(--cr-gold); }
.cr-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cr-hero__cta > * { flex: 1 1 200px; }
@media (max-width: 600px) {
  .cr-hero__bg { background-image: url("../images/game/chicken-road-jeu-crash-banniere-mobile.webp"); }
  .cr-hero__in { min-height: 440px; padding: 30px 14px 34px; }
  .cr-hero__card { padding: 24px 20px 22px; }
  /* comme sur le modele : le bouton principal passe devant sur mobile */
  .cr-hero__cta { flex-direction: column; }
  .cr-hero__cta .cr-btn-gold { order: 1; }
  .cr-hero__cta .cr-btn-ghost { order: 2; }
  .cr-hero__cta > * { flex: 1 1 auto; width: 100%; }
}

/* ---------------- Top casinos ---------------- */
.cr-top { max-width: var(--cr-wrap); margin: 0 auto; padding: 40px 16px 0; }
.cr-top__title { margin-bottom: 6px; }
.cr-top__intro { color: var(--cr-muted); font-size: 15px; margin-bottom: 18px; }
.cr-top__list { display: flex; flex-direction: column; gap: 12px; }
.cr-top__row {
  display: flex; align-items: center; gap: 18px; padding: 15px 18px;
  border: 1px solid var(--cr-line); border-radius: 14px; background: var(--cr-card);
  transition: background .25s, border-color .25s;
}
.cr-top__row:hover { background: var(--cr-card-2); border-color: var(--cr-line-2); }
.cr-top__row--1 {
  border-color: var(--cr-gold);
  box-shadow: 0 0 0 1px rgba(255, 194, 32, .35), 0 6px 28px rgba(255, 194, 32, .14);
}
.cr-top__rank {
  flex: 0 0 42px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  border-radius: 11px; background: var(--cr-card-2); border: 1px solid var(--cr-line);
  font-weight: 800; font-size: 18px;
}
.cr-top__row--1 .cr-top__rank {
  background: linear-gradient(180deg, var(--cr-gold-2), var(--cr-gold)); border-color: transparent; color: #2a1500;
}
.cr-top__logo {
  flex: 0 0 140px; width: 140px; height: 92px; border-radius: 10px;
  border: 1px solid var(--cr-line); object-fit: cover;
}
.cr-top__info { flex: 1 1 auto; min-width: 0; }
.cr-top__name { font-weight: 800; font-size: 19px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cr-top__medal {
  background: var(--cr-grad); color: #2a1500; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px;
}
.cr-top__bonus { color: var(--cr-gold-2); font-weight: 700; font-size: 15px; margin-top: 3px; }
.cr-top__meta { color: var(--cr-muted); font-size: 13px; margin-top: 5px; }
.cr-top__flag { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 13px; color: var(--cr-muted); }
.cr-top__flag svg { width: 20px; height: 14px; border-radius: 2px; flex: 0 0 auto; }
.cr-top__btn { flex: 0 0 auto; min-width: 168px; }
.cr-top__terms { color: var(--cr-muted); font-size: 12.5px; margin-top: 14px; }
@media (max-width: 767px) {
  .cr-top__row { flex-wrap: wrap; gap: 12px; }
  .cr-top__logo { flex: 0 0 96px; width: 96px; height: 63px; }
  .cr-top__btn { width: 100%; }
}

/* ---------------- Gains en direct ---------------- */
.cr-live { max-width: var(--cr-wrap); margin: 26px auto 0; padding: 0 16px; }
.cr-live__box { border: 1px solid var(--cr-line); border-radius: 14px; background: var(--cr-card); overflow: hidden; }
.cr-live__head {
  display: flex; align-items: center; gap: 11px; padding: 12px 18px;
  border-bottom: 1px solid var(--cr-line); background: rgba(255, 255, 255, .03);
}
.cr-live__on {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800;
  text-transform: uppercase; color: var(--cr-green);
}
.cr-live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cr-green); animation: crPulse 1.6s infinite; }
@keyframes crPulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .cr-live__dot { animation: none; } }
.cr-live__title { font-weight: 700; font-size: 15px; }
.cr-live__list { list-style: none; margin: 0; padding: 0; }
.cr-live__item {
  display: flex; align-items: center; gap: 12px; padding: 11px 18px;
  border-bottom: 1px solid rgba(42, 61, 133, .5); font-size: 14px;
}
.cr-live__item:last-child { border-bottom: 0; }
.cr-live__item.is-new { animation: crIn .45s ease; }
@keyframes crIn { from { opacity: 0; transform: translateY(-10px); } }
.cr-live__av {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 800; color: #2a1500;
}
.cr-live__av--1 { background: linear-gradient(180deg, #ffe066, #ffc220); }
.cr-live__av--2 { background: linear-gradient(180deg, #ff9a4d, #ff6a1f); }
.cr-live__av--3 { background: linear-gradient(180deg, #7ee0c0, #00b67a); }
.cr-live__av--4 { background: linear-gradient(180deg, #9fb4ff, #4c6ef5); color: #fff; }
.cr-live__body { flex: 1 1 auto; min-width: 0; }
.cr-live__amount { color: var(--cr-gold); }
.cr-live__meta { display: block; color: var(--cr-muted); font-size: 12.5px; margin-top: 2px; }
.cr-live__casino { display: inline-flex; align-items: center; gap: 6px; color: var(--cr-gold-2); cursor: pointer; }
.cr-live__casino img { width: 22px; height: 15px; border-radius: 3px; object-fit: cover; }
.cr-live__time { flex: 0 0 auto; color: var(--cr-muted); font-size: 12.5px; }
@media (max-width: 520px) { .cr-live__time { display: none; } }

/* ---------------- Sommaire ---------------- */
.cr-toc { max-width: var(--cr-wrap); margin: 30px auto 0; padding: 0 16px; }
.cr-toc__box { border: 1px solid var(--cr-line); border-radius: 14px; background: var(--cr-card); overflow: hidden; }
.cr-toc__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; background: none; border: 0; color: #fff; cursor: pointer;
  font: 800 18px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.cr-toc__t { display: inline-flex; align-items: center; gap: 10px; }
.cr-toc__t svg { width: 20px; height: 20px; color: var(--cr-gold); }
.cr-toc__tog { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--cr-muted); }
.cr-toc__tog svg { width: 14px; height: 14px; transition: transform .25s; }
.cr-toc.is-closed .cr-toc__tog svg { transform: rotate(-90deg); }
.cr-toc.is-closed .cr-toc__body { display: none; }
.cr-toc__body { padding: 0 18px 16px; }
.cr-toc__list { columns: 2; column-gap: 28px; margin: 0; padding-left: 20px; }
.cr-toc__list li { margin-bottom: 8px; break-inside: avoid; }
.cr-toc__list a { color: #dce4ff; font-size: 15px; }
.cr-toc__list a:hover { color: var(--cr-gold); }
@media (max-width: 700px) { .cr-toc__list { columns: 1; } }

/* ---------------- Sections ---------------- */
.cr-sec { max-width: var(--cr-wrap); margin: 0 auto; padding: 38px 16px 0; }
.cr-sec p, .cr-sec li { font-size: 16.5px; }
.cr-sec ul, .cr-sec ol { margin: 0 0 14px; padding-left: 22px; }
.cr-sec li { margin-bottom: 8px; }
.cr-lead { color: #dce4ff; font-size: 17.5px; }

/* Cartes */
.cr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 14px; margin: 18px 0; }
.cr-card {
  border: 1px solid var(--cr-line); border-radius: 14px; background: var(--cr-card); padding: 18px;
}
.cr-card h3 { margin-bottom: 8px; color: var(--cr-gold-2); }
.cr-card p { margin: 0; font-size: 15px; color: #d7dffa; }
.cr-card__n {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 9px; background: var(--cr-grad); color: #2a1500; font-weight: 800; margin-bottom: 10px;
}

/* Image d'illustration */
.cr-fig { margin: 18px 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--cr-line); }
.cr-fig img { width: 100%; }
.cr-fig figcaption { padding: 10px 14px; background: var(--cr-card); color: var(--cr-muted); font-size: 13.5px; }
.cr-split { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; align-items: start; }
/* sans min-width:0 une cellule de grille s'elargit pour contenir le
   tableau et fait deborder toute la page horizontalement */
.cr-split > * { min-width: 0; }
@media (max-width: 980px) { .cr-split { grid-template-columns: 1fr; } }

/* Tableaux */
.cr-scroll {
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 16px 0; border-radius: 14px; border: 1px solid var(--cr-line);
}
.cr-scroll table { width: 100%; border-collapse: collapse; min-width: 460px; font-size: 15.5px; }
.cr-scroll th {
  background: var(--cr-grad); color: #2a1500; font-weight: 800; text-align: left;
  padding: 13px 14px; white-space: nowrap;
}
.cr-scroll td { padding: 12px 14px; border-top: 1px solid var(--cr-line); }
@media (max-width: 520px) { .cr-scroll table { font-size: 14.5px; } .cr-scroll th, .cr-scroll td { padding: 10px 12px; } }
.cr-scroll tbody tr:nth-child(odd) { background: var(--cr-card); }
.cr-scroll tbody tr:nth-child(even) { background: var(--cr-bg-2); }
.cr-scroll td:first-child { font-weight: 700; color: #e8eeff; }
.cr-scroll b { color: var(--cr-gold); }
.cr-note { color: var(--cr-muted); font-size: 13.5px; margin-top: -4px; }

/* ---------------- Banniere bonus ---------------- */
.cr-banner {
  max-width: var(--cr-wrap); margin: 34px auto 0; padding: 0 16px;
}
.cr-banner__in {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 20px 24px; border-radius: 18px;
  border: 1px solid var(--cr-gold);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(255, 106, 31, .30) 0%, rgba(255, 106, 31, 0) 58%),
    linear-gradient(90deg, var(--cr-card-2) 0%, var(--cr-card) 100%);
  box-shadow: 0 0 0 1px rgba(255, 194, 32, .18), var(--cr-shadow);
}
.cr-banner__logo { flex: 0 0 116px; width: 116px; height: 76px; border-radius: 10px; object-fit: cover; }
.cr-banner__txt { flex: 1 1 260px; min-width: 0; }
.cr-banner__k { display: block; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--cr-gold); }
.cr-banner__b { display: block; font-size: clamp(18px, 2.4vw, 23px); font-weight: 800; margin: 3px 0; }
.cr-banner__s { display: block; color: var(--cr-muted); font-size: 14px; }
.cr-banner .cr-btn-gold { flex: 0 0 auto; }
@media (max-width: 640px) { .cr-banner .cr-btn-gold { width: 100%; } .cr-banner__in { padding: 18px; } }

/* ---------------- Avantages / inconvenients ---------------- */
.cr-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
@media (max-width: 767px) { .cr-pc { grid-template-columns: 1fr; } }
.cr-pc__col { border: 1px solid var(--cr-line); border-radius: 14px; background: var(--cr-card); padding: 18px 20px; }
.cr-pc__col--plus { border-color: rgba(0, 182, 122, .55); }
.cr-pc__col--moins { border-color: rgba(232, 52, 28, .5); }
.cr-pc__col h3 { margin-bottom: 10px; }
.cr-pc__col--plus h3 { color: #45d6a8; }
.cr-pc__col--moins h3 { color: #ff8a72; }
.cr-pc__col ul { list-style: none; margin: 0; padding: 0; }
.cr-pc__col li { position: relative; padding-left: 27px; margin-bottom: 9px; font-size: 15.5px; }
.cr-pc__col li::before {
  position: absolute; left: 0; top: 0; font-weight: 800; font-size: 17px;
}
.cr-pc__col--plus li::before { content: "+"; color: #45d6a8; }
.cr-pc__col--moins li::before { content: "\2212"; color: #ff8a72; }

/* ---------------- Avis ---------------- */
.cr-avis__sum {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 20px; border: 1px solid var(--cr-line); border-radius: 14px;
  background: var(--cr-card); margin-bottom: 16px;
}
.cr-avis__word { font-size: 20px; font-weight: 800; }
.cr-avis__txt { color: var(--cr-muted); font-size: 15px; }
.cr-avis__txt strong { color: #fff; }
.cr-stars { display: inline-flex; gap: 3px; }
.cr-star {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--cr-green); border-radius: 3px;
}
.cr-star svg { width: 19px; height: 19px; fill: #fff; }
.cr-star.is-half { background: linear-gradient(90deg, var(--cr-green) 50%, #4c5680 50%); }
.cr-star.is-empty { background: #4c5680; }
.cr-stars--sm .cr-star { width: 20px; height: 20px; }
.cr-stars--sm .cr-star svg { width: 15px; height: 15px; }
.cr-avis__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 14px; }
.cr-avis__card { border: 1px solid var(--cr-line); border-radius: 14px; background: var(--cr-card); padding: 18px; }
.cr-avis__head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.cr-avis__av { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cr-line-2); }
.cr-avis__name { font-weight: 800; display: block; }
.cr-avis__sub { color: var(--cr-muted); font-size: 13px; }
.cr-avis__rate { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
.cr-avis__date { color: var(--cr-muted); font-size: 12.5px; }
.cr-avis__t { font-weight: 800; margin: 0 0 6px; font-size: 16px; }
.cr-avis__body { font-size: 15px; color: #d7dffa; margin: 0 0 10px; }
.cr-avis__ok { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--cr-green); font-weight: 700; }
.cr-avis__ok svg { width: 15px; height: 15px; }

/* Avis expert */
.cr-expert {
  display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
  border: 1px solid var(--cr-gold); border-radius: 16px; padding: 20px 22px; margin-top: 16px;
  background: linear-gradient(90deg, rgba(255, 194, 32, .10) 0%, var(--cr-card) 60%);
}
.cr-expert__ph { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid var(--cr-gold); flex: 0 0 auto; }
.cr-expert__b { flex: 1 1 260px; min-width: 0; }
.cr-expert__n { font-weight: 800; font-size: 18px; display: block; }
.cr-expert__r { color: var(--cr-gold-2); font-size: 13.5px; display: block; margin-bottom: 9px; }
.cr-expert__q { font-style: italic; color: #e4eaff; margin: 0; font-size: 15.5px; }

/* ---------------- FAQ ---------------- */
.cr-faq__list { display: flex; flex-direction: column; gap: 10px; }
.cr-faq__item { border: 1px solid var(--cr-line); border-radius: 12px; background: var(--cr-card); overflow: hidden; }
.cr-faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; background: none; border: 0; color: #fff; text-align: left; cursor: pointer;
  font: 700 16.5px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.cr-faq__ic { flex: 0 0 auto; width: 15px; height: 15px; color: var(--cr-gold); transition: transform .25s; }
.cr-faq__item.is-open .cr-faq__ic { transform: rotate(180deg); }
.cr-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.cr-faq__item.is-open .cr-faq__a { grid-template-rows: 1fr; }
.cr-faq__a > div { overflow: hidden; }
.cr-faq__a p { padding: 0 18px 16px; margin: 0; color: #d7dffa; font-size: 15.5px; }

/* ---------------- Auteur + mise a jour ---------------- */
.cr-updated { max-width: var(--cr-wrap); margin: 34px auto 0; padding: 0 16px; }
.cr-updated__in {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--cr-line); border-radius: 14px; background: var(--cr-card); padding: 15px 18px;
}
.cr-updated__ic { color: var(--cr-gold); flex: 0 0 auto; }
.cr-updated__ic svg { width: 26px; height: 26px; }
.cr-updated__b { flex: 1 1 240px; }
.cr-updated__l { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--cr-muted); font-weight: 700; }
.cr-updated__d { font-weight: 800; }
.cr-updated__n { display: block; color: var(--cr-muted); font-size: 13.5px; margin-top: 3px; }
.cr-updated__ok { display: inline-flex; align-items: center; gap: 6px; color: var(--cr-green); font-weight: 700; font-size: 13.5px; }
.cr-updated__ok svg { width: 16px; height: 16px; }

/* ---------------- Pied de page ---------------- */
.cr-footer { margin-top: 46px; background: var(--cr-bg-2); border-top: 1px solid var(--cr-line); }
.cr-footer__in { max-width: var(--cr-wrap); margin: 0 auto; padding: 34px 16px 0; }
.cr-footer__top { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
.cr-footer__logo img { width: 200px; height: 87px; object-fit: contain; }
.cr-footer__navs { display: flex; gap: 46px; flex-wrap: wrap; }
.cr-footer__navs ul { list-style: none; margin: 0; padding: 0; }
.cr-footer__navs li { margin-bottom: 9px; }
.cr-footer__navs span, .cr-footer__navs a { color: #dce4ff; font-size: 14.5px; cursor: pointer; }
.cr-footer__navs span:hover, .cr-footer__navs a:hover { color: var(--cr-gold); }
.cr-socials { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 26px 0 0; padding: 0; }
.cr-socials img { width: 32px; height: 32px; opacity: .82; transition: opacity .2s; }
.cr-socials a:hover img { opacity: 1; }
.cr-apps { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.cr-apps img { height: 38px; width: auto; }
.cr-badges {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: center;
  margin-top: 26px; padding: 22px 0; border-top: 1px solid var(--cr-line);
}
.cr-badges img { opacity: .68; transition: opacity .2s; }
.cr-badges a:hover img { opacity: 1; }
.cr-rg {
  max-width: var(--cr-wrap); margin: 0 auto; padding: 0 16px 18px;
  color: var(--cr-muted); font-size: 13px; text-align: center;
}
.cr-footer__bottom { border-top: 1px solid var(--cr-line); }
.cr-copy { max-width: var(--cr-wrap); margin: 0 auto; padding: 16px; color: var(--cr-muted); font-size: 13px; text-align: center; }

/* ---------------- Modale demo ---------------- */
body.cr-locked { overflow: hidden; }
.cr-demo {
  position: fixed; inset: 0; z-index: 90; display: none;
  background: rgba(4, 8, 24, .95); padding: 54px 14px 88px;
}
.cr-demo.is-on { display: block; }
.cr-demo iframe {
  display: block; width: 100%; height: 100%; max-width: 1000px; margin: 0 auto;
  border: 0; border-radius: 14px; background: var(--cr-bg);
}
.cr-demo__x {
  position: absolute; top: 10px; right: 14px; width: 42px; height: 42px; line-height: 1;
  background: var(--cr-card); color: #fff; border: 1px solid var(--cr-line); border-radius: 10px;
  font-size: 26px; cursor: pointer;
}
.cr-demo__bot { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; padding: 0 14px; }
.cr-demo__bot .cr-btn-gold { width: min(360px, 100%); }

/* Offre par-dessus la demo */
.cr-offer {
  position: absolute; inset: 0; z-index: 5; display: none;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(4, 8, 24, .78); backdrop-filter: blur(3px);
}
.cr-offer.is-on { display: flex; }
.cr-offer__card {
  position: relative; width: min(410px, 100%); text-align: center;
  border: 1px solid var(--cr-gold); border-radius: 18px; padding: 26px 22px;
  background: linear-gradient(180deg, var(--cr-card-2), var(--cr-card)); box-shadow: var(--cr-shadow);
}
.cr-offer__x {
  position: absolute; top: 8px; right: 10px; width: 32px; height: 32px;
  background: none; border: 0; color: var(--cr-muted); font-size: 24px; cursor: pointer;
}
.cr-offer__logo { width: 104px; height: 68px; object-fit: cover; border-radius: 10px; margin: 0 auto 12px; }
.cr-offer__k { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--cr-gold); }
.cr-offer__t { margin: 6px 0 8px; font-size: 22px; }
.cr-offer__p { color: #d7dffa; font-size: 15px; margin-bottom: 10px; }
.cr-offer__b { color: var(--cr-gold-2); font-weight: 800; margin-bottom: 14px; }
.cr-offer__card .cr-btn-gold { width: 100%; }
.cr-offer__go { margin-top: 12px; background: none; border: 0; color: var(--cr-muted); font-size: 14px; text-decoration: underline; cursor: pointer; }

/* ---------------- Barre collante + retour haut ---------------- */
.cr-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  transform: translateY(105%); transition: transform .3s ease;
  background: rgba(9, 17, 50, .97); border-top: 1px solid var(--cr-gold);
  backdrop-filter: blur(9px); box-shadow: 0 -8px 30px rgba(0, 0, 0, .45);
}
.cr-sticky.is-on { transform: translateY(0); }
.cr-sticky__in {
  max-width: var(--cr-wrap); margin: 0 auto; padding: 11px 16px;
  display: flex; align-items: center; gap: 15px;
}
.cr-sticky__logo { flex: 0 0 74px; width: 74px; height: 48px; border-radius: 8px; object-fit: cover; }
.cr-sticky__i { flex: 1 1 auto; min-width: 0; }
.cr-sticky__k { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--cr-gold); font-weight: 800; }
.cr-sticky__n { font-weight: 800; }
.cr-sticky__b { display: block; color: var(--cr-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-sticky__btn { flex: 0 0 auto; min-height: 46px; }
.cr-sticky__x { flex: 0 0 auto; width: 32px; height: 32px; background: none; border: 0; color: var(--cr-muted); font-size: 24px; cursor: pointer; }
@media (max-width: 620px) {
  .cr-sticky__logo, .cr-sticky__b { display: none; }
  .cr-sticky__btn { min-height: 42px; padding: 0 18px; font-size: 15px; }
}

.cr-up {
  position: fixed; right: 18px; bottom: 92px; z-index: 65;
  width: 46px; height: 46px; border-radius: 12px; cursor: pointer;
  background: var(--cr-card); border: 1px solid var(--cr-line-2); color: #fff;
  opacity: 0; pointer-events: none; transition: opacity .25s;
  display: flex; align-items: center; justify-content: center;
}
.cr-up.is-on { opacity: 1; pointer-events: auto; }
.cr-up svg { width: 21px; height: 21px; }
.cr-up:hover { background: var(--cr-card-2); }