/* ========================================================================= Joute — vitrine statique. Design system « Souverain » (miroir de l'app). ========================================================================= */ :root { --anthracite: #111319; --surface: #14161d; --surface-container: #1d1f26; --surface-low: #191b22; --surface-high: #282a30; --card-border: #252932; --on-surface: #e2e2ea; --on-variant: #d5c4af; --outline: #9d8e7c; --gold: #ffbb49; --gold-deep: #e0a030; --cyan: #58d7ef; --carmin: #ffb4b1; --maxw: 1120px; --radius: 16px; --radius-sm: 10px; /* Échelle d'espacement — base 4px. Toute marge et tout padding du site s'y rattachent, pour un rythme vertical régulier plutôt qu'au cas par cas. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; /* Respiration verticale d'une section, du mobile au grand écran. */ --section-y: clamp(64px, 8vw, 104px); --font-display: "Barlow Condensed", "Arial Narrow", sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; } * { box-sizing: border-box; margin: 0; padding: 0; } /* Le fond vit sur et non sur : le canvas des braises peut ainsi se glisser en z-index négatif, devant le fond mais derrière tout le contenu, sans qu'aucune section ait besoin d'un z-index. */ html { scroll-behavior: smooth; background: var(--anthracite); } .embers { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } body { font-family: var(--font-body); background: transparent; color: var(--on-surface); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-5); } /* ---- Typographie ---- */ .display { font-family: var(--font-display); font-weight: 700; line-height: 1.02; letter-spacing: 0.5px; text-transform: uppercase; } .mono { font-family: var(--font-mono); } .gold { color: var(--gold); } .cyan { color: var(--cyan); } .carmin { color: var(--carmin); } /* ---- En-tête / nav ---- */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(17, 19, 25, 0.78); backdrop-filter: blur(12px); border-bottom: 1px solid var(--card-border); } .nav__inner { display: flex; align-items: center; gap: var(--s-5); height: 68px; } .nav__brand { display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: 4px; color: var(--gold); } .nav__brand img { width: 30px; height: 30px; } .nav__links { display: flex; gap: var(--s-6); flex: 1; justify-content: center; } .nav__links a { font-size: 13px; font-weight: 600; letter-spacing: 1px; color: var(--on-variant); text-transform: uppercase; transition: color .18s; } .nav__links a:hover { color: var(--gold); } .nav__cta { flex: none; } .nav__burger { display: none; margin-left: auto; background: none; border: 0; color: var(--gold); font-size: 26px; cursor: pointer; } /* ---- Boutons ---- */ .btn { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: 0.5px; padding: var(--s-3) var(--s-5); border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s; } .btn--gold { background: var(--gold); color: #442c00; box-shadow: 0 6px 20px rgba(255,187,73,.18); } .btn--gold:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(255,187,73,.28); } .btn--ghost { background: transparent; color: var(--gold); border-color: rgba(255,187,73,.4); } .btn--ghost:hover { background: rgba(255,187,73,.08); } /* ---- Sections ---- */ section { padding: var(--section-y) 0; position: relative; } .eyebrow { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-display); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); font-size: 15px; margin-bottom: var(--s-3); } .eyebrow::before { content: ""; width: 4px; height: 18px; background: var(--gold); border-radius: 2px; } .section-title { font-size: clamp(30px, 5vw, 46px); color: var(--on-surface); } .section-lead { max-width: 640px; margin-top: var(--s-4); color: var(--on-variant); font-size: 17px; } /* ---- Hero ---- */ .hero { padding: var(--section-y) 0 var(--s-8); text-align: center; overflow: hidden; } .hero__halo { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 32%, rgba(255,187,73,.16), transparent 42%); } .hero__blason { width: 132px; height: 132px; margin: 0 auto var(--s-5); filter: drop-shadow(0 8px 30px rgba(255,187,73,.25)); animation: float 6s ease-in-out infinite; } /* Le

est un conteneur : chaque ligne garde son propre style, le wordmark reste l'élément dominant. Font-size neutralisée pour ne pas hériter du 2em. / .heroh1 { font-size: 1rem; font-weight: inherit; } .herowordmark { display: block; font-size: clamp(58px, 13vw, 128px); letter-spacing: 10px; color: var(--gold); margin-left: 10px; } .herotag { display: block; font-family: var(--font-body); font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--on-variant); font-size: clamp(13px, 2.4vw, 17px); margin-top: var(--s-2); } .heropitch { display: block; font-family: var(--font-body); font-weight: 400; font-size: clamp(19px, 3vw, 26px); line-height: 1.35; color: var(--on-surface); margin: var(--s-4) auto 0; max-width: 560px; } .heropitch strong { font-weight: 700; color: var(--gold); } .herosub { max-width: 600px; margin: var(--s-5) auto 0; color: var(--on-variant); font-size: 18px; } .herocta { display: flex; gap: var(--s-4); justify-content: center; flex-wrap: wrap; margin-top: var(--s-6); } .heronote { margin-top: var(--s-4); font-size: 13px; color: var(--outline); } @keyframes float { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } } / ---- Grille de cartes générique ---- / .grid { display: grid; gap: var(--s-5); margin-top: var(--s-7); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .card { background: linear-gradient(180deg, var(--surface-container), var(--surface-low)); border: 1px solid var(--card-border); border-radius: var(--radius); padding: var(--s-5); transition: transform .18s, border-color .2s; } .card:hover { transform: translateY(-4px); border-color: rgba(255,187,73,.35); } .cardnum { font-family: var(--font-mono); font-size: 15px; color: var(--gold); } .card h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: .5px; font-size: 22px; margin: var(--s-3) 0 var(--s-2); text-transform: uppercase; } .card p { color: var(--on-variant); font-size: 15px; } / ---- Boucle de jeu (étapes) ---- / .stepicon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,187,73,.1); border: 1px solid rgba(255,187,73,.3); color: var(--gold); font-size: 22px; margin-bottom: var(--s-4); } / ---- Barème ---- / .bareme { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-5); margin-top: var(--s-7); align-items: start; } .panel { background: var(--surface-container); border: 1px solid var(--card-border); border-radius: var(--radius); padding: var(--s-5); } .panel h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .5px; font-size: 20px; margin-bottom: var(--s-4); } / Les paliers remplissent la largeur disponible : une colonne sur mobile, plusieurs sur grand écran, plutôt qu'une colonne étroite collée à gauche. / .ladder { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-3); } .ladder li { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--surface-low); border: 1px solid var(--card-border); border-radius: var(--radius-sm); } .ladder .lvl { font-family: var(--font-display); font-weight: 700; color: var(--gold); font-size: 20px; min-width: 74px; } .ladder .xp { font-family: var(--font-mono); color: var(--on-surface); margin-left: auto; } .chips { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); } .chip { font-size: 13px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--card-border); background: var(--surface-low); color: var(--on-variant); } .chip .mono { color: var(--gold); } .guardrails { list-style: none; display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-2); } .guardrails li { padding-left: var(--s-5); position: relative; color: var(--on-variant); font-size: 15px; } .guardrails li::before { content: "▹"; position: absolute; left: 0; color: var(--gold); } .guardrails strong { color: var(--on-surface); } / ---- Archétypes ---- / .arch { display: flex; flex-direction: column; align-items: flex-start; } .archemoji { font-size: 34px; line-height: 1; margin-bottom: var(--s-4); filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); } .arch h3 { font-size: 22px; margin: 0 0 var(--s-1); } .archtag { color: var(--gold); font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; } .archmeta { margin-top: var(--s-4); display: flex; gap: var(--s-4); font-size: 13px; color: var(--on-variant); border-top: 1px solid var(--card-border); padding-top: var(--s-4); width: 100%; } .archmeta .mono { color: var(--on-surface); } / ---- Étapes de la feuille de route ---- / / Trois étapes : trois colonnes, ou une seule. Jamais 2 + 1, qui romprait la lecture d'une progression en laissant la dernière étape orpheline. / .grid--phases { grid-template-columns: repeat(3, 1fr); } @media (max-width: 860px) { .grid--phases { grid-template-columns: 1fr; } } / Trois intensités décroissantes : or plein pour l'acquis, or estompé pour ce qui vient, cyan pour l'horizon — la lecture se fait sans lire les mots. / .phase { display: inline-block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 12px; line-height: 1.6; padding: 0 var(--s-3); border-radius: 999px; background: var(--gold); color: #442c00; border: 1px solid var(--gold); } .phase--next { background: rgba(255,187,73,.12); color: var(--gold); } .phase--far { background: rgba(88,215,239,.12); color: var(--cyan); border-color: rgba(88,215,239,.45); } / La pastille porte déjà l'espace au-dessus du titre. / .card .phase + h3 { margin-top: var(--s-3); } / ---- Arsenal / RPG ---- / .rpg { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); margin-top: var(--s-7); } .future { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3); } .future .chip { border-color: rgba(88,215,239,.3); } .future .chip b { color: var(--cyan); } / ---- Bande CTA ---- / .cta-band { text-align: center; background: radial-gradient(circle at 50% 0%, rgba(255,187,73,.1), transparent 60%); } .cta-band h2 { font-size: clamp(28px, 5vw, 44px); } / ---- Footer ---- / .footer { border-top: 1px solid var(--card-border); padding: var(--s-7) 0; color: var(--outline); font-size: 14px; } .footerinner { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; } .footer a { color: var(--on-variant); } .footer a:hover { color: var(--gold); } .footerlinks { display: flex; gap: var(--s-5); flex-wrap: wrap; } / ---- Barème : table d'exemples + calcul ---- / / Enfants de grille : sans min-width:0 ils refusent de passer sous la largeur minimale de leur contenu, et débordent l'écran sur les petits mobiles. / .bareme > , .rpg > , .grid > { min-width: 0; } /* Un tableau ne doit jamais élargir la page : il défile dans son propre cadre. / .table-scroll { overflow-x: auto; } .pts-table { width: 100%; border-collapse: collapse; margin-top: var(--s-2); } .pts-table th, .pts-table td { text-align: left; padding: var(--s-3); border-bottom: 1px solid var(--card-border); font-size: 14px; } .pts-table th { color: var(--outline); text-transform: uppercase; letter-spacing: 1px; font-size: 12px; font-weight: 700; } .pts-table td:last-child, .pts-table th:last-child { text-align: right; } .pts-table .val { font-family: var(--font-mono); color: var(--gold); font-weight: 700; } .pts-table .cat { color: var(--on-variant); font-size: 12px; } .calc { list-style: none; display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); } .calc li { display: flex; align-items: baseline; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--surface-low); border: 1px solid var(--card-border); border-radius: var(--radius-sm); font-size: 14px; } .calc li .lbl { color: var(--on-variant); } .calc li .amt { margin-left: auto; font-family: var(--font-mono); font-weight: 700; } .calc li .amt.plus { color: var(--gold); } .calc li.total { background: rgba(255,187,73,.1); border-color: rgba(255,187,73,.4); } .calc li.total .lbl { color: var(--on-surface); font-weight: 700; } .calc li.total .amt { color: var(--gold); font-size: 18px; } .calc small { color: var(--outline); } / ---- Bonus (mini-cartes) ---- / .bonus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-4); } .bonus { background: var(--surface-low); border: 1px solid var(--card-border); border-radius: var(--radius-sm); padding: var(--s-4); } .bonus h4 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .5px; font-size: 16px; margin-bottom: var(--s-2); } .bonus .tiers { display: flex; flex-wrap: wrap; gap: var(--s-2); } .bonus .tiers span { font-family: var(--font-mono); font-size: 12px; color: var(--gold); background: rgba(255,187,73,.08); border: 1px solid rgba(255,187,73,.25); border-radius: 6px; padding: 3px 8px; } / ---- Grades & badges ---- / .badges-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-4); } .badge { display: flex; gap: var(--s-4); align-items: center; background: var(--surface-container); border: 1px solid var(--card-border); border-radius: var(--radius-sm); padding: var(--s-4); } .badgemedal { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: radial-gradient(circle at 50% 35%, rgba(255,187,73,.22), rgba(255,187,73,.04)); border: 1px solid rgba(255,187,73,.45); overflow: hidden; } .badgemedal img { width: 42px; height: 42px; image-rendering: pixelated; object-fit: contain; } .badget { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .5px; font-size: 16px; } .badged { color: var(--on-variant); font-size: 13px; } / ---- Sélecteur H/F ---- / .gender-toggle { display: inline-flex; background: var(--surface-low); border: 1px solid var(--card-border); border-radius: 999px; padding: 4px; margin-top: var(--s-5); } .gender-toggle button { font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--on-variant); background: none; border: 0; padding: 9px 22px; border-radius: 999px; cursor: pointer; transition: color .18s, background .18s; } .gender-toggle button.active { background: var(--gold); color: #442c00; } / ---- Cartes archétypes (avatars) ---- / .arch { cursor: pointer; align-items: center; text-align: center; } .archavatar { width: 116px; height: 116px; object-fit: contain; image-rendering: pixelated; margin-bottom: var(--s-2); filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); transition: transform .2s; } .arch:hover .archavatar { transform: scale(1.06) translateY(-2px); } .arch h3 { margin: 0 0 2px; } .archmeta { justify-content: center; } .archhint { margin-top: var(--s-3); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--outline); } / ---- Modale archétype ---- / .modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(8,10,14,.8); backdrop-filter: blur(6px); } .modal.open { display: flex; } .modalbox { position: relative; width: 100%; max-width: 780px; background: linear-gradient(180deg, var(--surface-container), var(--surface-low)); border: 1px solid rgba(255,187,73,.3); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-columns: 300px 1fr; } .modalart { background: radial-gradient(circle at 50% 40%, rgba(255,187,73,.14), transparent 65%); display: grid; place-items: center; padding: 24px; border-right: 1px solid var(--card-border); } .modalart img { height: 220px; width: auto; max-width: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 12px 26px rgba(0,0,0,.55)); } .modalbody { padding: var(--s-6); overflow-y: auto; max-height: 82vh; } .modalemoji { font-size: 26px; } .modalbody h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 30px; color: var(--gold); margin: 4px 0 2px; } .modaltag { color: var(--on-variant); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; } .modallore { color: var(--on-surface); margin: var(--s-4) 0; line-height: 1.7; } .modalsub { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 1px; font-size: 14px; color: var(--outline); margin-bottom: var(--s-2); } .modalsports { columns: 2; column-gap: 22px; list-style: none; } .modalsports li { font-size: 14px; color: var(--on-variant); padding: var(--s-1) 0 var(--s-1) var(--s-4); position: relative; break-inside: avoid; } .modalsports li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); font-size: 11px; top: 6px; } .modalclose { position: absolute; top: 12px; right: 14px; z-index: 2; background: rgba(0,0,0,.35); border: 1px solid var(--card-border); color: var(--on-surface); width: 36px; height: 36px; border-radius: 50%; font-size: 20px; cursor: pointer; line-height: 1; } .modalclose:hover { border-color: var(--gold); color: var(--gold); } @media (max-width: 700px) { .modalbox { grid-template-columns: 1fr; max-height: 90vh; overflow-y: auto; } .modalart { border-right: 0; border-bottom: 1px solid var(--card-border); } .modalart img { height: 170px; } .modalsports { columns: 1; } .bonus-grid, .badges-grid { grid-template-columns: 1fr; } } / ---- Sous-titre interne à une section ---- / .subhead { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: 22px; color: var(--on-surface); margin: var(--s-7) 0 var(--s-1); } / Ligne d'explication discrète, sous un titre ou dans une carte. / .hint { color: var(--on-variant); font-size: 14px; } .hint--sm { font-size: 13px; } .hint--gap { margin-bottom: var(--s-3); } .hint--top { margin-top: var(--s-4); } .footnote { margin-top: var(--s-4); color: var(--outline); font-size: 13px; } / Panneau qui suit un autre bloc dans la même section. / .panel--stacked { margin-top: var(--s-5); } .section-lead--center { margin: var(--s-4) auto 0; text-align: center; } .cta-bandblason { margin: 0 auto var(--s-5); } / ---- Utilitaire : lisible au lecteur d'écran, invisible à l'œil ---- / .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } / ---- Liste d'attente ---- / .waitlist { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; margin-top: var(--s-6); } .waitlistinput { font-family: var(--font-body); font-size: 15px; color: var(--on-surface); background: var(--surface-low); border: 1px solid var(--card-border); border-radius: var(--radius-sm); padding: var(--s-3) var(--s-4); width: min(320px, 100%); transition: border-color .18s, box-shadow .18s; } .waitlistinput::placeholder { color: var(--outline); } .waitlistinput:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,187,73,.15); } .waitlistinput[aria-invalid="true"] { border-color: var(--carmin); } / Piège à robots : hors flux, hors tabulation, hors lecteur d'écran. / .waitlistpot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .waitlist button[disabled] { opacity: .6; cursor: progress; transform: none; } .waitlistmsg { min-height: 22px; margin-top: var(--s-4); font-size: 14px; font-weight: 600; } .waitlistmsg.is-ok { color: var(--gold); } .waitlistmsg.is-ko { color: var(--carmin); } .waitlistmsg a { color: inherit; text-decoration: underline; } .waitlistnote { margin-top: var(--s-1); font-size: 13px; color: var(--outline); } .waitlistnote a { color: var(--on-variant); text-decoration: underline; } .waitlistnote a:hover { color: var(--gold); } / ---- FAQ (accordéon natif
) ---- / .faq { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-7); max-width: 820px; } .faqitem { background: var(--surface-container); border: 1px solid var(--card-border); border-radius: var(--radius-sm); transition: border-color .2s; } .faqitem[open] { border-color: rgba(255,187,73,.35); } .faqitem summary { list-style: none; display: block; cursor: pointer; position: relative; padding: var(--s-4) 54px var(--s-4) var(--s-5); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: 18px; line-height: 1.3; color: var(--on-surface); transition: color .18s; } .faqitem summary::-webkit-details-marker { display: none; } .faqitem summary:hover { color: var(--gold); } .faqitem summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: var(--radius-sm); } .faqitem summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 22px; line-height: 1; color: var(--gold); } .faqitem[open] summary::after { content: "−"; } .faqa { padding: 0 var(--s-5) var(--s-5); color: var(--on-variant); font-size: 15px; } .faqa a { color: var(--gold); text-decoration: underline; } / ---- Reveal au scroll ---- / .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; } .reveal.is-in { opacity: 1; transform: none; } / ---- Responsive ---- / @media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } .bareme, .rpg { grid-template-columns: 1fr; } / Blason + six liens + bouton demandent ~830 px de contenu : en dessous, les liens passent au menu déroulant. Le bouton, lui, reste visible. / .navlinks { display: none; } .navlinks.open { display: flex; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--anthracite); border-bottom: 1px solid var(--card-border); padding: var(--s-2) var(--s-5) var(--s-4); } .navlinks.open a { padding: var(--s-3) 0; } .navburger { display: block; } } @media (max-width: 380px) { .container { padding: 0 var(--s-4); } } @media (max-width: 620px) { .navcta { display: none; } .grid--3, .grid--4, .grid--2 { grid-template-columns: 1fr; } section { padding: var(--s-8) 0; } } @media (prefers-reduced-motion: reduce) { { animation: none !important; scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } /* Le script ne peuple déjà pas le canvas dans ce cas ; on le retire aussi du rendu, pour que la garantie ne dépende pas de JavaScript. */ .embers { display: none; } }