/* ========================================================================== Millionz Casino : feuille de style Mise en page sombre a bandeau, barre laterale et navigation repliable. ========================================================================== */ :root { --nuit: #0b1524; --nuit-2: #111e33; --nuit-3: #16253d; --bleu: #0d7bf7; --bleu-clair:#5aa9ff; --corail: #e4816b; --corail-2: #d96b52; --texte: #e6edf6; --texte-2: #9db0c8; --ligne: #1e3050; --r: 12px; --titre: "Madefor Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --corps: "Madefor Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Les polices Madefor ne sont pas fournies avec cette archive. La pile systeme prend le relais : aucun fichier a telecharger, aucun decalage de mise en page au chargement. Pour revenir aux polices de marque, deposez madefor-display.woff2 et madefor-text.woff2 dans assets/fonts/ puis decommentez les deux blocs ci-dessous et les deux balises preload du . */ /* @font-face { font-family: "Madefor Display"; src: url("../fonts/madefor-display.woff2") format("woff2"); font-weight: 400 800; font-display: swap; } @font-face { font-family: "Madefor Text"; src: url("../fonts/madefor-text.woff2") format("woff2"); font-weight: 400 700; font-display: swap; } */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--nuit); color: var(--texte); font-family: var(--corps); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--bleu-clair); text-decoration: none; } a:hover { text-decoration: underline; } .wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; } .skip { position: absolute; left: -9999px; top: 0; background: var(--bleu); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 var(--r) 0; z-index: 100; } .skip:focus { left: 0; } /* ------------------------------------------------------------- En-tete */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(11, 21, 36, .96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ligne); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .7rem; padding-bottom: .7rem; } .brand img { height: 28px; width: auto; } .header-actions { display: flex; align-items: center; gap: .6rem; } /* -------------------------------------------------------------- Boutons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; background: var(--corail); color: #14202f; font-family: var(--titre); font-weight: 700; font-size: .95rem; padding: .72rem 1.35rem; border-radius: 10px; border: 2px solid transparent; transition: transform .12s ease, background .12s ease; text-align: center; } .btn:hover { background: #f09880; text-decoration: none; transform: translateY(-1px); color: #14202f; } .btn:active { transform: translateY(1px); } .btn-sm { font-size: .86rem; padding: .5rem 1rem; } .btn-line { background: transparent; color: var(--texte); border-color: #2c4468; } .btn-line:hover { background: rgba(90,169,255,.14); color: var(--texte); border-color: var(--bleu); } .btn-bleu { background: var(--bleu); color: #fff; } .btn-bleu:hover { background: var(--bleu-clair); color: #fff; } .btn-wide { width: 100%; } /* --------------------------------------------------------------- Bandeau */ .hero { margin: 1.4rem 0 1.6rem; border-radius: 18px; overflow: hidden; position: relative; border: 1px solid var(--ligne); /* Le degrade reste en dessous : il sert de repli si l'image ne charge pas et garantit la lisibilite du texte sur la partie gauche. */ background-color: #0b1524; background-image: linear-gradient(100deg, rgba(11,17,36,.30) 0%, rgba(11,21,36,.16) 45%, rgba(11,21,36,.04) 78%, rgba(11,21,36,0) 100%), url("../img/hero-fond-1200.webp"); background-size: cover, cover; background-position: center, center right; background-repeat: no-repeat, no-repeat; } @media (min-width: 1280px) { .hero { background-image: linear-gradient(100deg, rgba(11,17,36,.30) 0%, rgba(11,21,36,.16) 45%, rgba(11,21,36,.04) 78%, rgba(11,21,36,0) 100%), url("../img/hero-fond-1920.webp"); } } @media (max-width: 760px) { .hero { background-image: linear-gradient(180deg, rgba(11,17,36,.28) 0%, rgba(11,21,36,.16) 55%, rgba(11,21,36,.04) 100%), url("../img/hero-fond-760.webp"); } } .hero-inner { padding: clamp(1.8rem, 4vw, 3.4rem); max-width: 720px; position: relative; z-index: 2; } .hero-logo { height: 34px; width: auto; margin-bottom: 1.1rem; } .hero h1 { font-family: var(--titre); font-weight: 800; letter-spacing: -.02em; font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.6rem); line-height: 1.04; margin: 0 0 .7rem; } .hero .accroche { font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); color: #d7e4f5; margin: 0 0 1.4rem; } .hero .accroche strong { color: #fff; } .hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1rem; } .hero-meta { font-size: .86rem; color: var(--texte-2); margin: 0; } .hero-chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ligne); border-top: 1px solid var(--ligne); } .hero-chiffres div { background: rgba(11,21,36,.72); padding: 1rem 1.1rem; text-align: center; } .hero-chiffres b { display: block; font-family: var(--titre); font-weight: 800; color: #fff; font-size: clamp(1.1rem, .9rem + .8vw, 1.5rem); line-height: 1.1; } .hero-chiffres span { font-size: .78rem; color: var(--texte-2); } @media (max-width: 720px) { .hero-chiffres { grid-template-columns: repeat(2, 1fr); } } /* --------------------------------------------------------- Mise en page */ .layout { display: grid; grid-template-columns: 260px 1fr; gap: 1.8rem; align-items: start; padding-bottom: 3rem; } @media (max-width: 980px) { .layout { grid-template-columns: 1fr; } } .rail { position: sticky; top: 74px; display: grid; gap: .5rem; } @media (max-width: 980px) { .rail { position: static; } } .rail-lien { display: flex; align-items: center; gap: .7rem; background: var(--nuit-2); border: 1px solid var(--ligne); border-radius: 10px; padding: .8rem 1rem; color: var(--texte); font-weight: 600; font-size: .95rem; transition: border-color .12s ease, background .12s ease; } .rail-lien:hover { border-color: var(--bleu); background: var(--nuit-3); text-decoration: none; color: #fff; } .rail-lien .ico { width: 20px; text-align: center; color: var(--corail); flex-shrink: 0; } .rail-cta { margin-top: .4rem; } /* --------------------------------------------------- Navigation repliable */ .nav-repli { background: var(--nuit-2); border: 1px solid var(--ligne); border-radius: var(--r); margin-bottom: 1.4rem; overflow: hidden; } .nav-repli > summary { list-style: none; cursor: pointer; padding: 1rem 1.2rem; font-family: var(--titre); font-weight: 700; color: var(--corail); display: flex; align-items: center; justify-content: space-between; } .nav-repli > summary::-webkit-details-marker { display: none; } .nav-repli > summary::after { content: "\25BE"; color: var(--texte-2); font-size: .9rem; } .nav-repli[open] > summary::after { content: "\25B4"; } .nav-repli ol { margin: 0; padding: 0 1.2rem 1.1rem 2.4rem; columns: 2; column-gap: 1.6rem; color: var(--texte-2); } .nav-repli li { margin-bottom: .35rem; break-inside: avoid; } .nav-repli a { color: var(--texte); font-size: .93rem; } @media (max-width: 720px) { .nav-repli ol { columns: 1; } } /* ----------------------------------------------------------- Contenu */ .prose { min-width: 0; } .prose section { margin-bottom: 2.6rem; } .prose h2 { font-family: var(--titre); font-weight: 800; color: #fff; letter-spacing: -.01em; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; margin: 0 0 .9rem; padding-bottom: .6rem; border-bottom: 2px solid var(--ligne); } .prose h3 { font-family: var(--titre); font-weight: 700; color: #fff; font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); margin: 1.8rem 0 .6rem; } .prose h4 { font-family: var(--titre); font-weight: 700; color: var(--corail); font-size: 1.02rem; margin: 1.4rem 0 .5rem; } .prose p { margin: 0 0 1rem; } .prose strong { color: #fff; font-weight: 700; } .prose ul, .prose ol { margin: 0 0 1.1rem; padding-left: 1.3rem; } .prose li { margin-bottom: .5rem; } figure { margin: 1.5rem 0; } figure img { border-radius: var(--r); border: 1px solid var(--ligne); } figcaption { font-size: .86rem; color: var(--texte-2); text-align: center; margin-top: .6rem; font-style: italic; } /* ------------------------------------------------------------ Tableaux */ .table-wrap { overflow-x: auto; border: 1px solid var(--ligne); border-radius: var(--r); margin: 1.4rem 0; } table { width: 100%; border-collapse: collapse; font-size: .95rem; } caption { text-align: left; padding: .9rem 1.1rem; color: var(--texte-2); font-size: .86rem; border-bottom: 1px solid var(--ligne); } th, td { padding: .8rem 1.1rem; border-bottom: 1px solid var(--ligne); text-align: left; vertical-align: top; } thead th { background: var(--nuit-3); color: #fff; font-family: var(--titre); font-weight: 700; font-size: .88rem; } tbody th { color: #fff; font-weight: 700; } tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; } tbody tr:nth-child(even) { background: rgba(22,37,61,.4); } /* -------------------------------------------------------------- Encadres */ .box { border: 1px solid var(--ligne); border-left: 4px solid var(--bleu); background: var(--nuit-2); border-radius: var(--r); padding: 1.1rem 1.3rem; margin: 1.5rem 0; } .box-vert { border-left-color: #24b47e; } .box-ambre { border-left-color: #e0a33a; } .box-rouge { border-left-color: #e0574a; } .box .kicker { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bleu-clair); margin: 0 0 .35rem; } .box-vert .kicker { color: #3fd39b; } .box-ambre .kicker { color: #f0bc5c; } .box-rouge .kicker { color: #f07f73; } .box p { margin: 0 0 .6rem; } .box p:last-child { margin-bottom: 0; } /* ---------------------------------------------------------- Offre, note */ .offre { display: grid; grid-template-columns: 1fr auto; gap: 1.2rem; align-items: center; background: linear-gradient(135deg, var(--nuit-2), var(--nuit-3)); border: 1px solid var(--bleu); border-radius: var(--r); padding: 1.3rem 1.5rem; margin: 1.6rem 0; } @media (max-width: 720px) { .offre { grid-template-columns: 1fr; } } .offre .lbl { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bleu-clair); margin: 0 0 .3rem; } .offre .montant { font-family: var(--titre); font-weight: 800; color: #fff; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.7rem); line-height: 1.15; margin: 0 0 .35rem; } .offre .detail { margin: 0; color: var(--texte-2); font-size: .92rem; } .note-globale { display: flex; align-items: center; gap: 1.2rem; border: 1px solid var(--ligne); background: var(--nuit-2); border-radius: var(--r); padding: 1.2rem 1.4rem; margin: 0 0 1.5rem; } .note-globale .score { flex-shrink: 0; width: 5rem; height: 5rem; border-radius: 14px; background: linear-gradient(135deg, var(--bleu), #6b46e5); color: #fff; display: grid; place-items: center; font-family: var(--titre); font-weight: 800; line-height: 1; } .note-globale .score b { font-size: 1.7rem; display: block; } .note-globale .score span { font-size: .72rem; opacity: .9; } .note-globale p { margin: 0; } .note-globale .titre { display: block; font-family: var(--titre); font-weight: 700; color: #fff; font-size: 1.05rem; margin-bottom: .2rem; } .critere { display: grid; grid-template-columns: 12rem 1fr auto; gap: .9rem; align-items: center; font-size: .93rem; margin-bottom: .55rem; } @media (max-width: 620px) { .critere { grid-template-columns: 1fr auto; } .critere .barre { grid-column: 1 / -1; } } .critere .nom { color: var(--texte-2); } .critere .barre { height: .55rem; border-radius: 999px; background: var(--nuit-3); overflow: hidden; } .critere .barre i { display: block; height: 100%; background: linear-gradient(90deg, var(--bleu), var(--bleu-clair)); border-radius: 999px; } .critere .val { font-family: var(--titre); font-weight: 700; color: #fff; font-size: .9rem; } /* --------------------------------------------------------- Pour / contre */ .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.4rem 0; } @media (max-width: 720px) { .duo { grid-template-columns: 1fr; } } .duo > div { background: var(--nuit-2); border: 1px solid var(--ligne); border-radius: var(--r); padding: 1.1rem 1.3rem; } .duo h3 { margin-top: 0; font-size: 1.05rem; } .duo h3.pro { color: #3fd39b; } .duo h3.con { color: #f07f73; } .duo ul { margin-bottom: 0; } /* ---------------------------------------------------------------- Etapes */ ol.steps { counter-reset: etape; list-style: none; padding-left: 0; } ol.steps li { counter-increment: etape; position: relative; padding-left: 2.6rem; margin-bottom: .9rem; } ol.steps li::before { content: counter(etape); position: absolute; left: 0; top: .1rem; width: 1.8rem; height: 1.8rem; border-radius: 8px; background: var(--bleu); color: #fff; font-family: var(--titre); font-weight: 700; font-size: .85rem; display: grid; place-items: center; } /* ------------------------------------------------------------------- FAQ */ .faq details { background: var(--nuit-2); border: 1px solid var(--ligne); border-radius: var(--r); margin-bottom: .7rem; overflow: hidden; } .faq summary { cursor: pointer; padding: 1rem 1.2rem; font-family: var(--titre); font-weight: 700; color: #fff; font-size: 1rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--corail); font-size: 1.4rem; line-height: 1; } .faq details[open] summary::after { content: "\2013"; } .faq details > div { padding: 0 1.2rem 1.1rem; border-top: 1px solid var(--ligne); padding-top: 1rem; } .faq details > div p { margin: 0; } /* -------------------------------------------------------------- Rappels */ .cta-row { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.5rem 0; } .final { background: linear-gradient(135deg, var(--nuit-2), var(--nuit-3)); border: 1px solid var(--ligne); border-radius: var(--r); padding: 1.6rem 1.8rem; margin: 2.4rem 0 0; } .final h2 { border-bottom: 0; padding-bottom: 0; } /* ------------------------------------------------------------ Divulgation */ .divulgation { font-size: .85rem; color: var(--texte-2); background: var(--nuit-2); border: 1px solid var(--ligne); border-radius: var(--r); padding: .9rem 1.2rem; margin: 1.2rem 0; } .divulgation strong { color: var(--texte); } /* ----------------------------------------------------------- Pied de page */ .site-footer { background: #081120; border-top: 1px solid var(--ligne); padding: 2.4rem 0 1.6rem; margin-top: 2rem; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-bottom: 1.8rem; } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; } } .footer-grid img { margin-bottom: .8rem; height: 30px; width: auto; } .footer-grid p { color: var(--texte-2); font-size: .92rem; margin: 0; } .footer-titre { font-family: var(--titre); font-weight: 700; color: #fff; margin: 0 0 .6rem; font-size: 1rem; } .footer-grid ul { list-style: none; margin: 0; padding: 0; } .footer-grid li { margin-bottom: .4rem; } .footer-grid a { color: var(--texte-2); font-size: .93rem; } .footer-grid a:hover { color: var(--texte); } .legal { border-top: 1px solid var(--ligne); padding-top: 1.2rem; font-size: .84rem; color: var(--texte-2); } .legal p { margin: 0 0 .7rem; } .age { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e0574a; color: #fff; font-family: var(--titre); font-weight: 700; font-size: .78rem; flex-shrink: 0; } /* -------------------------------------------------------- Barre collante */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; gap: .6rem; padding: .7rem 1rem; background: rgba(11,21,36,.97); border-top: 1px solid var(--ligne); backdrop-filter: blur(10px); } .sticky-cta .btn { flex: 1; } @media (max-width: 720px) { .sticky-cta { display: flex; } body { padding-bottom: 4.6rem; } } .crumbs { font-size: .85rem; color: var(--texte-2); padding: .9rem 0 0; } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; } .crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--ligne); } .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; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } } /* --------------------------------------------------------- Grille de jeux */ .jeux-grille { display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem; margin: 1.5rem 0; } @media (max-width: 900px) { .jeux-grille { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 520px) { .jeux-grille { grid-template-columns: repeat(2, 1fr); } } .jeu { position: relative; display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--ligne); background: var(--nuit-2); transition: transform .14s ease, border-color .14s ease; } .jeu:hover { transform: translateY(-3px); border-color: var(--bleu); text-decoration: none; } .jeu img { width: 100%; height: auto; display: block; } .jeu .play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8,16,28,.55); opacity: 0; transition: opacity .14s ease; } .jeu:hover .play, .jeu:focus-visible .play { opacity: 1; } .jeu .play span { width: 42px; height: 42px; border-radius: 50%; background: var(--bleu); color: #fff; display: grid; place-items: center; font-size: 1rem; font-weight: 700; padding-left: 3px; } .jeu .nom { display: block; padding: .5rem .6rem; font-size: .78rem; color: var(--texte-2); text-align: center; line-height: 1.25; } /* ------------------------------------------------- Bloc de transparence */ .eeat-debut { margin-top: 3rem; padding-top: 2.2rem; border-top: 3px solid var(--bleu); } .eeat-debut::before { content: "À propos de cette page"; display: block; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bleu-clair); margin-bottom: .8rem; } .auteur { display: flex; gap: 1.2rem; align-items: flex-start; border: 1px solid var(--ligne); border-left: 4px solid var(--bleu); border-radius: var(--r); background: var(--nuit-2); padding: 1.3rem 1.5rem; margin: 1.4rem 0; } .auteur-jeton { width: 4.2rem; height: 4.2rem; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--bleu), #6b46e5); color: #fff; display: grid; place-items: center; font-family: var(--titre); font-weight: 800; font-size: 1.3rem; } .auteur .nom { font-family: var(--titre); font-weight: 700; color: #fff; font-size: 1.05rem; margin: 0 0 .1rem; } .auteur .role { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bleu-clair); margin: 0 0 .6rem; } .auteur p { margin: 0 0 .6rem; font-size: .95rem; } .auteur p:last-child { margin-bottom: 0; } @media (max-width: 620px) { .auteur { flex-direction: column; } }