:root { --fond: #07100c; --fond2: #0c1812; --carte: #111f18; --carte2: #17291f; --ligne: rgba(255, 255, 255, .09); --ligne2: rgba(255, 255, 255, .16); --texte: #f1f6f2; --doux: #a3b3a9; --pale: #71837a; --acide: #c6f135; --acide2: #e3ff7a; --vert: #34d399; --rouge: #fb7185; --ambre: #fbbf24; --titres: "Barlow Condensed", Impact, system-ui, sans-serif; --corps: Inter, system-ui, sans-serif; --marge: clamp(16px, 4vw, 56px); }
* { box-sizing: border-box; margin: 0; }
html { background: var(--fond); color-scheme: dark; }
body { min-height: 100vh; display: flex; flex-direction: column; font: 400 16px/1.55 var(--corps); color: var(--texte); background: radial-gradient(900px 500px at 85% -10%, rgba(198, 241, 53, .1), transparent 70%), var(--fond); }
main { flex: 1; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--titres); font-weight: 800; line-height: 1.02; letter-spacing: .005em; text-transform: uppercase; }
h1 { font-size: clamp(2.8rem, 8vw, 6rem); } h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); } h3 { font-size: 1.3rem; }
:focus-visible { outline: 2px solid var(--acide); outline-offset: 2px; }

#barre { position: sticky; top: 0; z-index: 30; background: rgba(7, 16, 12, .86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--ligne); }
.barre-in { display: flex; align-items: center; gap: 20px; padding: 12px var(--marge); }
.marque { display: flex; align-items: center; gap: 9px; font: 800 1.45rem var(--titres); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.marque i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--acide); }
.marque i::after { content: ""; width: 12px; height: 12px; background: var(--fond); clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.nav { display: flex; gap: 18px; flex: 1; font-size: .92rem; font-weight: 600; color: var(--doux); }
.nav a:hover, .nav a.actif { color: var(--acide); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 10px; border: 1px solid transparent; font-weight: 700; font-size: .93rem; white-space: nowrap; }
.btn.acide { background: var(--acide); color: #0b1505; } .btn.acide:hover { background: var(--acide2); }
.btn.ligne { border-color: var(--ligne2); background: transparent; } .btn.ligne:hover { border-color: var(--acide); }
.btn.plein { width: 100%; } .btn:disabled { opacity: .55; pointer-events: none; }

.hero { position: relative; overflow: hidden; padding: clamp(36px, 7vw, 84px) var(--marge) clamp(30px, 5vw, 56px); display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.hero h1 em { font-style: normal; color: var(--acide); }
.hero p { margin: 18px 0 24px; max-width: 560px; color: var(--doux); font-size: 1.08rem; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.terrain { perspective: 900px; }
.terrain > div { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; transform: rotateX(52deg) rotateZ(-22deg); transform-style: preserve-3d; background: repeating-linear-gradient(90deg, #12331f 0 12.5%, #0f2b1a 12.5% 25%); border: 3px solid rgba(255, 255, 255, .55); box-shadow: 0 50px 80px -20px rgba(198, 241, 53, .22); }
.terrain > div::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; background: rgba(255, 255, 255, .55); }
.terrain > div::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 3px solid rgba(255, 255, 255, .55); border-radius: 50%; }
.terrain b { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--acide); box-shadow: 0 0 26px var(--acide); animation: passe 7s ease-in-out infinite; z-index: 1; }
@keyframes passe { 0%, 100% { left: 12%; top: 22%; } 25% { left: 42%; top: 66%; } 50% { left: 66%; top: 28%; } 75% { left: 84%; top: 62%; } }
@media (prefers-reduced-motion: reduce) { .terrain b { animation: none; left: 48%; top: 46%; } }

.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ligne); border-block: 1px solid var(--ligne); }
.chiffres > div { background: var(--fond2); padding: 18px var(--marge); }
.chiffres b { display: block; font: 800 clamp(1.7rem, 3.5vw, 2.5rem) var(--titres); color: var(--acide); }
.chiffres span { font-size: .84rem; color: var(--doux); }

.section { padding: clamp(32px, 5vw, 56px) var(--marge); }
.section-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; margin-bottom: 20px; }
.section-tete p { color: var(--doux); max-width: 640px; }
.lien { color: var(--acide); font-weight: 600; font-size: .92rem; }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.prono { display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: var(--carte); border: 1px solid var(--ligne); }
.prono.premium { border-color: rgba(198, 241, 53, .32); }
.prono-haut { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: .78rem; color: var(--doux); }
.pastille { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.pastille.acide { background: var(--acide); color: #0b1505; } .pastille.gris { background: var(--carte2); color: var(--doux); } .pastille.vert { background: rgba(52, 211, 153, .16); color: #6ee7b7; } .pastille.rouge { background: rgba(251, 113, 133, .16); color: #fda4af; }
.equipes { display: grid; gap: 7px; }
.equipe { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.equipe img { width: 24px; height: 24px; object-fit: contain; flex: none; }
.equipe span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equipe b { font: 800 1.15rem var(--titres); }
.choix { padding: 11px 12px; border-radius: 10px; background: var(--carte2); }
.choix small { display: block; color: var(--doux); font-size: .74rem; }
.choix strong { font: 700 1.18rem var(--titres); text-transform: uppercase; letter-spacing: .02em; }
.jauge { height: 6px; margin-top: 8px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.jauge i { display: block; height: 100%; background: var(--acide); }
.choix-ligne { display: flex; justify-content: space-between; gap: 8px; font-size: .82rem; margin-top: 6px; color: var(--doux); }
.verrou { display: grid; gap: 8px; padding: 13px; border-radius: 10px; background: repeating-linear-gradient(135deg, var(--carte2) 0 8px, var(--carte) 8px 16px); font-size: .86rem; color: var(--doux); }
.prono p.analyse { font-size: .84rem; color: var(--doux); }
.preuve { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; font: 500 .7rem ui-monospace, Consolas, monospace; color: var(--pale); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preuve:hover { color: var(--acide); }
.vide { padding: 40px 18px; text-align: center; color: var(--doux); border: 1px dashed var(--ligne2); border-radius: 14px; }
.vide h3 { color: var(--texte); margin-bottom: 8px; }

.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th { text-align: left; padding: 9px 10px; color: var(--pale); font-size: .74rem; text-transform: uppercase; border-bottom: 1px solid var(--ligne2); }
.table td { padding: 10px; border-bottom: 1px solid var(--ligne); vertical-align: middle; }
.table-boite { overflow-x: auto; border: 1px solid var(--ligne); border-radius: 14px; background: var(--fond2); }
.puces { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.puces button { padding: 7px 13px; border-radius: 999px; background: var(--carte); border: 1px solid var(--ligne2); font-size: .84rem; font-weight: 600; }
.puces button.actif { background: var(--acide); color: #0b1505; border-color: var(--acide); }

.offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.offre { display: grid; gap: 12px; align-content: start; padding: 22px; border-radius: 14px; background: var(--carte); border: 1px solid var(--ligne); }
.offre.top { border-color: var(--acide); }
.offre .prix { font: 800 2.8rem var(--titres); color: var(--acide); }
.offre .prix small { font-size: 1.1rem; color: var(--doux); }
ul.coches { display: grid; gap: 7px; padding: 0; list-style: none; font-size: .9rem; color: var(--doux); }
ul.coches li::before { content: "✓"; color: var(--acide); font-weight: 800; margin-right: 8px; }
.avis { padding: 14px 16px; border-radius: 12px; background: rgba(251, 191, 36, .08); border: 1px solid rgba(251, 191, 36, .28); font-size: .88rem; color: #fde68a; }

.etroit { max-width: 780px; }
.texte h2 { margin: 26px 0 10px; font-size: 1.6rem; } .texte p, .texte li { color: var(--doux); margin-bottom: 10px; } .texte ul { padding-left: 20px; }
.champ { display: grid; gap: 6px; margin-bottom: 13px; font-size: .86rem; font-weight: 600; color: var(--doux); }
.champ input { padding: 12px 13px; border-radius: 10px; background: var(--carte); border: 1px solid var(--ligne2); color: var(--texte); font: 500 1rem var(--corps); outline: 0; }
.champ input:focus { border-color: var(--acide); }
.coche { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; font-size: .88rem; color: var(--doux); }
.coche input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--acide); flex: none; }
.erreur { color: var(--rouge); font-size: .88rem; margin-bottom: 10px; }
.boite { max-width: 440px; margin: 30px auto; padding: 26px; border-radius: 16px; background: var(--carte); border: 1px solid var(--ligne); }
.boite h1 { font-size: 2.3rem; margin-bottom: 14px; }
.voile { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .72); }
.fenetre { position: relative; width: min(480px, 100%); max-height: 92vh; overflow: auto; padding: 24px; border-radius: 16px; background: var(--fond2); border: 1px solid var(--ligne2); }
.fenetre .fermer { position: absolute; right: 12px; top: 10px; background: none; border: 0; font-size: 1.4rem; color: var(--doux); }
.fenetre h2 { margin-bottom: 12px; }
.case { position: relative; padding: 12px 14px; margin-bottom: 9px; border-radius: 10px; background: var(--carte); font-size: .78rem; color: var(--doux); }
.case b { display: block; margin-top: 2px; padding-right: 66px; font: 700 1.1rem var(--corps); color: var(--texte); overflow-wrap: anywhere; }
.case button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 5px 9px; border-radius: 7px; border: 1px solid var(--ligne2); background: var(--carte2); font-size: .74rem; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: .78rem; overflow-wrap: anywhere; }
#pied { padding: 28px var(--marge); border-top: 1px solid var(--ligne); font-size: .82rem; color: var(--pale); display: grid; gap: 10px; }
#pied nav { display: flex; flex-wrap: wrap; gap: 16px; } #pied a:hover { color: var(--acide); }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; padding: 11px 16px; border-radius: 10px; background: var(--carte2); border: 1px solid var(--ligne2); font-size: .9rem; }
.squelette { height: 300px; margin: var(--marge); border-radius: 14px; background: var(--carte); }
/* --- 3D, direct et confiance --- */
#verite { padding: 6px var(--marge); background: #0c1812; border-bottom: 1px solid var(--ligne); font-size: .72rem; line-height: 1.35; text-align: center; color: var(--doux); }
#fil-direct { position: sticky; top: var(--haut, 54px); z-index: 28; overflow: hidden; background: rgba(12, 24, 18, .94); border-bottom: 1px solid var(--ligne); backdrop-filter: blur(10px); }
.fil-defile { display: flex; width: max-content; animation: defile var(--n, 30s) linear infinite; } #fil-direct:hover .fil-defile { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-50%); } }
.fil-defile a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 20px; font-size: .8rem; white-space: nowrap; border-right: 1px solid var(--ligne); } .fil-defile a .point-vif { margin: 0; width: 7px; height: 7px; } .fil-defile b { color: var(--acide); font: 800 1rem var(--titres); } .fil-defile em { font-style: normal; color: var(--rouge); font-size: .72rem; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .fil-defile { animation: none; overflow-x: auto; } }
#alertes { position: fixed; right: 16px; bottom: 16px; z-index: 70; display: grid; gap: 8px; max-width: min(360px, calc(100vw - 32px)); }
.alerte-but { display: grid; gap: 2px; padding: 12px 16px; border-radius: 12px; background: var(--acide); color: #0b1505; box-shadow: 0 16px 40px rgba(198, 241, 53, .32); animation: arrive .45s cubic-bezier(.2, 1.3, .4, 1); } .alerte-but b { font: 800 1.5rem var(--titres); } .alerte-but span { font-size: .84rem; font-weight: 600; }
@keyframes arrive { from { transform: translateY(24px) scale(.9); opacity: 0; } }
.hero3d { position: relative; min-height: clamp(520px, 80vh, 780px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.scene { position: absolute; inset: 0; z-index: -1; } .scene canvas { display: block; width: 100% !important; height: 100% !important; } .scene.pret .repli { display: none; } .scene .repli { position: absolute; inset: 10% 8% 8% 40%; display: grid; place-items: center; } .scene .repli > div { width: 100%; }
.hero3d::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(7, 16, 12, .9) 0, rgba(7, 16, 12, .5) 42%, rgba(7, 16, 12, 0) 68%), linear-gradient(0deg, var(--fond) 0, rgba(7, 16, 12, 0) 34%); }
.hero3d-texte { max-width: 700px; padding: clamp(40px, 8vw, 90px) var(--marge) clamp(34px, 5vw, 60px); } .hero3d-texte h1 { font-size: clamp(2.5rem, 5.4vw, 4.8rem); } .hero3d-texte h1 em { font-style: normal; color: var(--acide); } .hero3d-texte p { margin: 16px 0 22px; max-width: 560px; font-size: 1.05rem; color: #d3ddd6; }
.btn.verre { background: rgba(255, 255, 255, .08); border-color: var(--ligne2); backdrop-filter: blur(8px); } .btn.verre:hover { border-color: var(--acide); }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .3, 1); transition-delay: calc(var(--i, 0) * 90ms); } .reveal.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
.grille-e { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.carte3d { position: relative; padding: 22px; border-radius: 16px; overflow: hidden; background: linear-gradient(150deg, #17291f, #0c1812); border: 1px solid var(--ligne2); will-change: transform; } .carte3d.vu { transition: transform .18s ease-out, opacity .6s; } .carte3d h3 { font-size: 1.5rem; margin: 8px 0; } .carte3d p { color: var(--doux); font-size: .92rem; } .num3d { font: 800 2.8rem var(--titres); color: transparent; -webkit-text-stroke: 1px var(--acide); line-height: 1; }
.dieu { margin: clamp(20px, 4vw, 44px) var(--marge); padding: clamp(28px, 5vw, 56px); border-radius: 20px; text-align: center; background: radial-gradient(600px 240px at 50% 0, rgba(198, 241, 53, .16), transparent), #0c1812; border: 1px solid rgba(198, 241, 53, .32); } .dieu h2 { font-size: clamp(2.3rem, 6vw, 4.4rem); color: var(--acide); margin-bottom: 12px; } .dieu p { max-width: 680px; margin: auto; color: #d3ddd6; font-size: 1.05rem; }
.bande-dieu { padding: 10px var(--marge); text-align: center; font-size: .82rem; color: #fde68a; background: rgba(251, 191, 36, .08); border-bottom: 1px solid rgba(251, 191, 36, .22); }
.raison h3 { font-size: 1.08rem; margin-bottom: 8px; } .raison.pour h3 { color: var(--acide); } .raison.contre h3 { color: var(--rouge); }
.raisons { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; font-size: .86rem; color: #d3ddd6; } .raisons li { padding-left: 14px; border-left: 2px solid var(--ligne2); } .pour .raisons li { border-color: var(--acide); } .contre .raisons li { border-color: var(--rouge); } .verdict { margin-top: 12px; padding: 10px 12px; border-radius: 9px; background: var(--carte); font-size: .88rem; font-weight: 600; }
.profond { padding: 11px 12px; border-radius: 10px; background: var(--carte); } .profond summary { margin: 0; } .profond p { margin-top: 8px; font-size: .88rem; color: #d3ddd6; }
.infos { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; } .infos a { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--ligne); } .infos b { font-size: .88rem; font-weight: 600; } .infos small { font-size: .72rem; color: var(--pale); }
.video-bloc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 4vw, 44px); align-items: center; padding: clamp(16px, 3vw, 30px); border-radius: 20px; background: #0c1812; border: 1px solid var(--ligne2); }
.video-ecran { width: min(270px, 62vw); aspect-ratio: 9 / 16; overflow: hidden; border-radius: 16px; background: #000; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); } .video-ecran canvas { display: block; width: 100%; height: 100%; } .petit-v { width: min(190px, 60vw); margin: auto; }
.bande-part { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .bande-part a { display: grid; place-items: center; min-width: 110px; height: 66px; padding: 10px 16px; border-radius: 12px; background: var(--carte); border: 1px solid var(--ligne); } .bande-part img { max-height: 44px; max-width: 120px; object-fit: contain; }
.grille-p { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .partenaire { display: flex; gap: 13px; padding: 16px; border-radius: 14px; background: var(--carte); border: 1px solid var(--ligne); } .partenaire.vedette { border-color: var(--acide); } .partenaire img, .logo-e { width: 56px; height: 56px; flex: none; border-radius: 12px; object-fit: contain; background: var(--carte2); } .logo-e { display: grid; place-items: center; font: 800 1.7rem var(--titres); color: var(--acide); } .partenaire b { display: block; } .partenaire small { font-size: .74rem; color: var(--pale); } .partenaire p { margin-top: 5px; font-size: .84rem; color: var(--doux); }
@media (max-width: 680px) { .hero3d { min-height: 560px; } .hero3d::after { background: linear-gradient(0deg, var(--fond) 8%, rgba(7, 16, 12, .72) 58%, rgba(7, 16, 12, .25) 100%); } .video-bloc { grid-template-columns: 1fr; justify-items: center; text-align: center; } .video-bloc .actions { justify-content: center; } }
:root { --ciel: #38bdf8; }
/* --- Le monde : tout tourne autour du ballon --- */
html { background: radial-gradient(1100px 700px at 50% 30%, color-mix(in srgb, var(--acide) 9%, transparent), transparent 70%), var(--fond); background-attachment: fixed; } html body, html[data-edition] body { background: transparent; }
#monde { position: fixed; inset: 0; z-index: 0; pointer-events: none; } #monde canvas { display: block; width: 100% !important; height: 100% !important; }
#monde-repli { position: fixed; left: 0; top: 0; z-index: 0; border-radius: 50%; pointer-events: none; transition: transform .8s cubic-bezier(.2, .8, .25, 1), width .8s, height .8s; background: radial-gradient(circle at 34% 28%, #fff, #dfe6df 34%, #7d8c81 74%, #2c352f); box-shadow: 0 0 90px color-mix(in srgb, var(--acide) 40%, transparent), inset -18px -22px 50px rgba(0, 0, 0, .55); }
#orbites { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; transition: opacity .3s; }
.anneau-o { position: absolute; left: 0; top: 0; border: 1px dashed color-mix(in srgb, var(--acide) 32%, transparent); border-radius: 50%; }
.orb-pil, .orb-logo { position: absolute; left: 0; top: 0; pointer-events: auto; transition: opacity .25s, box-shadow .2s, background .2s; will-change: transform; }
.orb-pil { display: inline-flex; align-items: center; gap: 8px; padding: 10px 17px; border-radius: 999px; background: rgba(9, 18, 13, .78); border: 1px solid color-mix(in srgb, var(--acide) 42%, transparent); backdrop-filter: blur(10px); white-space: nowrap; } .orb-pil b { font: 800 1.14rem var(--titres); letter-spacing: .03em; text-transform: uppercase; } .orb-pil span { padding: 1px 8px; border-radius: 999px; background: var(--acide); color: #0b1505; font-size: .76rem; font-weight: 800; } .orb-pil:hover { background: var(--acide); color: #0b1505; } .orb-pil:hover span { background: #0b1505; color: var(--acide); }
.orb-logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(240, 245, 240, .92); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); } .orb-logo img { width: 32px; height: 32px; object-fit: contain; } .orb-logo:hover { box-shadow: 0 0 0 3px var(--acide); }
#barre { z-index: 30; } #verite, #fil-direct, main, #pied { position: relative; } #app > *, #pied, #verite { position: relative; z-index: 1; } #app > .hero-ballon { z-index: auto; } #fil-direct { z-index: 28; position: sticky; }
.hero-ballon { position: relative; display: grid; align-items: end; justify-items: center; min-height: calc(100vh - 90px); padding: 0 var(--marge) 34px; overflow: hidden; pointer-events: none; }
.geant { position: absolute; inset: 0; z-index: -1; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 800 clamp(5.4rem, 24vh, 20rem)/.86 var(--titres); letter-spacing: .01em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--acide) 55%, transparent); user-select: none; animation: geant 1.4s .1s cubic-bezier(.2, .9, .25, 1) both; } .geant span:first-child { transform: translateX(-13vw); } .geant span:last-child { transform: translateX(11vw); color: color-mix(in srgb, var(--acide) 13%, transparent); } @keyframes geant { from { opacity: 0; letter-spacing: .32em; } }
.hero-bas { position: relative; z-index: 4; pointer-events: auto; max-width: 880px; text-align: center; } .hero-bas h1 { font-size: clamp(1.9rem, 4.4vw, 3.5rem); perspective: 600px; } .hero-bas p { margin-top: 6px; color: #d3ddd6; font-size: 1rem; }
.defiler { position: relative; z-index: 4; pointer-events: auto; margin-top: 14px; display: block; width: 26px; height: 42px; border: 2px solid var(--ligne2); border-radius: 14px; } .defiler i { position: absolute; left: 50%; top: 7px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--acide); animation: defiler 1.7s ease-in-out infinite; } @keyframes defiler { 70% { transform: translateY(16px); opacity: 0; } 100% { opacity: 0; } }
html::before { display: none; }
.chiffres { background: transparent; border: 0; gap: 12px; padding: 0 var(--marge); } .chiffres > div { border-radius: 18px; background: rgba(10, 20, 15, .72); border: 1px solid var(--ligne); backdrop-filter: blur(6px); }
.section { position: relative; } .prono, .offre, .actu, .vide, .bloc, .table-boite, .liste-matchs, .produit, .ticket:not(.coupon) { background: rgba(13, 26, 19, .84); } .ligne-match { background: rgba(10, 20, 15, .86); } .jours a, .puces button { background: rgba(13, 26, 19, .84); }
html[data-edition="info"] .prono, html[data-edition="info"] .actu, html[data-edition="info"] .vide { background: rgba(14, 26, 44, .88); } html[data-edition="boutique"] .produit, html[data-edition="boutique"] .vide { background: rgba(36, 26, 13, .88); }
.tete-page { grid-template-columns: minmax(0, 1fr); min-height: clamp(360px, 62vh, 620px); background: none; border: 0; } .tete-3d { display: none; } .tete-txt { max-width: min(640px, 56vw); } .tete-txt h1 { font-size: clamp(3.2rem, 8.4vw, 7.6rem); } .match-tete { background: rgba(10, 20, 15, .7); } .bande-dieu { position: relative; z-index: 1; }
.dieu { background: rgba(10, 20, 15, .78); backdrop-filter: blur(6px); } .vip-bande { backdrop-filter: blur(6px); }
@media (max-width: 760px) { .geant { font-size: clamp(4.4rem, 25vw, 9rem); justify-content: flex-start; padding-top: 7vh; } .geant span:first-child, .geant span:last-child { transform: none; } .hero-ballon { min-height: calc(100svh - 110px); } .orb-pil { padding: 7px 11px; } .orb-pil b { font-size: .95rem; } .orb-logo { width: 34px; height: 34px; } .orb-logo img { width: 24px; height: 24px; } .tete-txt { max-width: 100%; padding-top: 42vw; } .tete-page { min-height: 0; } .chiffres { grid-template-columns: 1fr 1fr; padding: 0 16px; } }
.corps-article p { color: var(--texte); font-size: 1.06rem; line-height: 1.7; margin-bottom: 14px; }
/* --- Identité par domaine --- */
html[data-edition="info"] { --acide: #38bdf8; --acide2: #7dd3fc; --fond: #070d16; --fond2: #0b1422; --carte: #101c2e; --carte2: #17273d; --ciel: #fbbf24; --doux: #a7b6c9; --pale: #72839a; }
html[data-edition="boutique"] { --acide: #fbbf24; --acide2: #fde68a; --fond: #120d06; --fond2: #1a130a; --carte: #231a0e; --carte2: #2f2414; --ciel: #fb923c; --doux: #c5b69c; --pale: #8d7f69; }
html[data-edition="confiance"] { --acide: #34d399; --acide2: #6ee7b7; }
html[data-edition="info"] body { background: var(--fond); } html[data-edition="boutique"] body { background: radial-gradient(900px 500px at 85% -10%, rgba(251, 191, 36, .12), transparent 70%), var(--fond); }
html[data-edition="info"] .marque i, html[data-edition="boutique"] .marque i { background: var(--acide); }
/* --- Transition entre les pages --- */
html::before { content: ""; position: fixed; inset: 0; z-index: 90; background: var(--acide); transform: translateX(-101%) skewX(-8deg); pointer-events: none; }
html.balaye::before { animation: balaye .62s cubic-bezier(.7, 0, .25, 1); }
@keyframes balaye { 0% { transform: translateX(-108%) skewX(-8deg); } 48%, 52% { transform: translateX(0) skewX(-8deg); } 100% { transform: translateX(108%) skewX(-8deg); } }
html.balaye #app > * { animation: arrivee .55s .22s both; } @keyframes arrivee { from { opacity: 0; transform: translateY(18px); } }
/* --- Têtes de page animées --- */
.mot { display: inline-block; animation: mot .7s calc(.18s + var(--i) * 70ms) cubic-bezier(.2, .9, .25, 1) both; } @keyframes mot { from { opacity: 0; transform: translateY(.55em) rotateX(-55deg); } }
.tete-page { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 44%); align-items: center; min-height: clamp(340px, 56vh, 560px); padding: clamp(24px, 4vw, 44px) var(--marge); overflow: hidden; border-bottom: 1px solid var(--ligne); background: radial-gradient(620px 420px at 78% 50%, color-mix(in srgb, var(--acide) 16%, transparent), transparent 70%); }
.tete-txt { position: relative; grid-row: 1; grid-column: 1; z-index: 1; } .tete-txt h1 { font-size: clamp(2.8rem, 7vw, 5.8rem); perspective: 600px; } .tete-txt p { margin-top: 14px; max-width: 560px; font-size: 1.04rem; color: #d3ddd6; }
.tete-3d { grid-row: 1; grid-column: 2; align-self: stretch; min-height: 320px; position: relative; } .tete-3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; } .tete-3d:not(.pret)::after { content: ""; position: absolute; left: 50%; top: 50%; width: min(240px, 56%); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff, #cfd8d0 42%, #5c6b60 86%); box-shadow: 0 0 80px color-mix(in srgb, var(--acide) 45%, transparent); }
.hero3d { min-height: min(92vh, 860px); } .hero3d-texte h1 { perspective: 600px; }
/* --- Tickets : de vrais coupons --- */
.coupons { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 22px; align-items: start; perspective: 1400px; }
.coupon { position: relative; border-radius: 18px; background: linear-gradient(165deg, #182c21, #0d1a13); border: 1px solid var(--ligne2); box-shadow: 0 22px 50px rgba(0, 0, 0, .42); animation: coupon .8s calc(var(--i, 0) * 110ms) cubic-bezier(.2, .9, .25, 1) both; transform-style: preserve-3d; transition: transform .18s ease-out, box-shadow .2s; } .coupons > .coupon:nth-child(2) { --i: 1; } .coupons > .coupon:nth-child(3) { --i: 2; } .coupons > .coupon:nth-child(4) { --i: 3; } .coupons > .coupon:nth-child(5) { --i: 4; }
@keyframes coupon { from { opacity: 0; transform: rotateX(-38deg) translateY(44px) scale(.94); } }
.coupon:hover { box-shadow: 0 30px 70px color-mix(in srgb, var(--acide) 18%, rgba(0, 0, 0, .5)); }
.coupon h3 { font-size: 1.85rem; } .coupon .ticket-chiffres { position: relative; padding-bottom: 14px; border-bottom: 2px dashed var(--ligne2); }
.coupon .ticket-chiffres::before, .coupon .ticket-chiffres::after { content: ""; position: absolute; bottom: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--fond); } .coupon .ticket-chiffres::before { left: -29px; } .coupon .ticket-chiffres::after { right: -29px; }
.coupon.folie { background: linear-gradient(165deg, #3b1320, #170b10); border-color: rgba(251, 113, 133, .45); } .coupon.folie .ticket-chiffres b, .coupon.folie em { color: var(--rouge); } .coupon.fun { background: linear-gradient(165deg, #10293a, #0a1720); border-color: rgba(56, 189, 248, .4); } .coupon.fun .ticket-chiffres b, .coupon.fun em { color: var(--ciel); }
.code-barres { display: flex; gap: 2px; height: 30px; margin-top: 2px; opacity: .7; overflow: hidden; } .code-barres i { display: block; height: 100%; background: var(--texte); flex: none; } .sceau-t { color: var(--pale); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.passes .coupon { filter: saturate(.75); }
/* --- Analyses : anneau animé --- */
@property --pv { syntax: "<number>"; inherits: false; initial-value: 0; }
.avec-anneau { display: flex; gap: 14px; align-items: center; } .avec-anneau > div:last-child { min-width: 0; flex: 1; }
.anneau { --pv: 0; flex: none; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: conic-gradient(var(--acide) calc(var(--pv) * 1%), rgba(255, 255, 255, .08) 0); animation: anneau 1.3s .15s cubic-bezier(.2, .8, .25, 1) forwards; position: relative; } .anneau::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--carte2); } .anneau b { position: relative; font: 800 1.05rem var(--titres); } @keyframes anneau { to { --pv: var(--v); } }
.entree { animation: arrivee .6s calc(var(--i, 0) * 70ms) both; } .prono { transition: transform .22s, border-color .22s, box-shadow .22s; } .prono:hover { transform: translateY(-5px); border-color: var(--acide); box-shadow: 0 18px 42px rgba(0, 0, 0, .4); }
.vip-bande { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin: clamp(16px, 3vw, 30px) var(--marge); padding: clamp(24px, 4vw, 44px); border-radius: 22px; background: linear-gradient(120deg, color-mix(in srgb, var(--acide) 20%, #0c1812), #0c1812 70%); border: 1px solid color-mix(in srgb, var(--acide) 40%, transparent); } .vip-bande h2 { max-width: 760px; font-size: clamp(1.7rem, 3.6vw, 2.8rem); } .vip-bande p { margin-top: 8px; color: var(--doux); }
.trace { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace 1.8s .25s ease-out forwards; } @keyframes trace { to { stroke-dashoffset: 0; } }
/* --- Édition info --- */
.flash-info { display: flex; align-items: center; gap: 12px; padding: 8px var(--marge); background: var(--fond2); border-bottom: 1px solid var(--ligne); font-size: .84rem; overflow: hidden; } .flash-info > b { flex: none; padding: 2px 9px; border-radius: 5px; background: var(--acide); color: #04121d; font: 800 .86rem var(--titres); text-transform: uppercase; animation: pouls 1.8s infinite; } .flash-defile { overflow: hidden; flex: 1; } .flash-defile > div { display: flex; gap: 36px; width: max-content; animation: defile 70s linear infinite; } .flash-defile:hover > div { animation-play-state: paused; } .flash-defile a { white-space: nowrap; }
.une { position: relative; display: grid; align-items: end; min-height: clamp(340px, 58vh, 560px); overflow: hidden; border-bottom: 1px solid var(--ligne); background: var(--fond2); } .une img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: zoom 18s ease-out both; } @keyframes zoom { from { transform: scale(1.14); } } .une > div { position: relative; padding: clamp(24px, 5vw, 56px) var(--marge); background: linear-gradient(0deg, var(--fond) 8%, rgba(7, 13, 22, .78) 62%, transparent); } .une h1 { max-width: 980px; font-size: clamp(2rem, 5vw, 4.2rem); text-transform: none; } .une p { max-width: 720px; margin: 10px 0; color: #dbe5f0; } .une small { color: var(--doux); }
.produit-vide i { animation: flotteB 3s ease-in-out infinite; } @keyframes flotteB { 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .mot, .coupon, .entree, .anneau, .trace, html.balaye #app > *, html.balaye::before, .une img, .flash-defile > div { animation: none !important; } .trace { stroke-dashoffset: 0; } .anneau { --pv: var(--v); } }
@media (max-width: 860px) { .tete-page { grid-template-columns: 1fr; min-height: 0; padding-top: 0; } .tete-3d { grid-row: 1; grid-column: 1; height: 230px; min-height: 230px; } .tete-txt { grid-row: 2; } .coupons { grid-template-columns: 1fr; } .coupon .ticket-chiffres::before { left: -27px; } .coupon .ticket-chiffres::after { right: -27px; } }
.opt-choisie td { background: rgba(198, 241, 53, .08); } .val-plus { color: var(--acide); font-weight: 700; }
.compo3d { position: relative; height: clamp(300px, 46vw, 460px); border-radius: 14px; overflow: hidden; background: #0a1a11; } .compo3d canvas { display: block; width: 100% !important; height: 100% !important; touch-action: pan-y; } .ticket.folie { background: linear-gradient(160deg, rgba(251, 113, 133, .14), var(--carte) 58%); border-color: rgba(251, 113, 133, .4); }
.article h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin: 10px 0 14px; } .article-img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 16px; margin-bottom: 14px; } .article .chapo { font-size: 1.15rem; color: var(--texte); } .article .btn { margin-top: 12px; }
.grille-b { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; } .produit { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 16px; background: var(--carte); border: 1px solid var(--ligne); transition: transform .18s ease-out; } .produit.vedette { border-color: var(--acide); } .produit img, .produit-vide { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--carte2); } .produit-vide { display: grid; place-items: center; } .produit-vide i { width: 60px; height: 60px; border-radius: 50%; background: var(--acide); opacity: .35; } .produit-c { display: grid; gap: 7px; align-content: start; padding: 14px; } .produit-c small { color: var(--pale); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; } .produit-c h3 { font-size: 1.28rem; } .produit-c p { color: var(--doux); font-size: .86rem; } .produit-b { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; } .prix-p { font: 800 1.6rem var(--titres); color: var(--acide); } .prix-p small { font-size: .85rem; color: var(--doux); }
body:has(.bande-dieu) #verite { display: none; }
h2 .point-vif { vertical-align: middle; width: 12px; height: 12px; }
.champ .pastille { justify-self: start; }
html, body { overflow-x: clip; }
.sur-titre { display: inline-block; margin-bottom: 12px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--acide); }
.pale { color: var(--pale); } .petit { font-size: .8rem; }
.hero h1 { font-size: clamp(2.7rem, 6.6vw, 5.4rem); }
.terrain i { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #fff; opacity: .85; box-shadow: 0 8px 6px rgba(0, 0, 0, .4); }
.terrain i:nth-of-type(1) { left: 22%; top: 30%; } .terrain i:nth-of-type(2) { left: 40%; top: 62%; } .terrain i:nth-of-type(3) { left: 66%; top: 34%; background: var(--ciel); } .terrain i:nth-of-type(4) { left: 78%; top: 66%; background: var(--ciel); }
.terrain > div { animation: flotte 9s ease-in-out infinite; }
@keyframes flotte { 0%, 100% { transform: rotateX(52deg) rotateZ(-22deg) translateZ(0); } 50% { transform: rotateX(49deg) rotateZ(-18deg) translateZ(14px); } }
@media (prefers-reduced-motion: reduce) { .terrain > div { animation: none; } }
.point-vif { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: var(--rouge); animation: pouls 1.6s ease-in-out infinite; }
@keyframes pouls { 50% { opacity: .35; } }
.vif { color: var(--rouge); } .vif-tag { font-size: .78rem; font-weight: 700; color: var(--rouge); }
.prono-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .prono-bas .preuve { width: auto; flex: 0 1 auto; min-width: 0; }
.prono-bas .lien { white-space: nowrap; font-size: .84rem; }
.logo-vide { width: 28px; height: 28px; border-radius: 50%; background: var(--carte2); flex: none; }
.liste-matchs { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--ligne); border-radius: 12px; background: var(--ligne); }
.ligne-match { display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr) 170px; align-items: center; gap: 12px; padding: 11px 14px; background: var(--fond2); font-size: .92rem; font-weight: 600; }
.ligne-match:hover { background: var(--carte); }
.ligne-match .eq { display: flex; align-items: center; gap: 9px; min-width: 0; } .ligne-match .eq span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ligne-match .eq.d { justify-content: flex-end; text-align: right; }
.ligne-match img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.ligne-match .score, .ligne-match .h { text-align: center; font: 800 1.2rem var(--titres); } .ligne-match .h { color: var(--doux); font-weight: 700; }
.ligne-match .droite { text-align: right; font-size: .78rem; font-weight: 500; } .mini-p { color: var(--acide); }
.groupe { margin-bottom: 20px; } .groupe h3 { margin-bottom: 9px; color: var(--doux); font-size: 1.1rem; }
.jours { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; padding-bottom: 3px; } .jours a { padding: 8px 14px; border-radius: 10px; background: var(--carte); font-size: .86rem; font-weight: 600; white-space: nowrap; color: var(--doux); } .jours a.actif { background: var(--carte2); color: var(--acide); box-shadow: inset 0 -2px var(--acide); }
.puces button { display: inline-flex; align-items: center; }
.grille-t { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-items: start; }
.ticket { display: grid; gap: 11px; padding: 18px; border-radius: 14px; background: var(--carte); border: 1px solid var(--ligne); min-width: 0; } .ticket.fun { background: linear-gradient(160deg, rgba(56, 189, 248, .1), var(--carte) 55%); } .ticket.probable { border-color: rgba(198, 241, 53, .32); } .ticket p { font-size: .84rem; }
.ticket-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .ticket-chiffres div { padding: 9px; border-radius: 9px; background: var(--carte2); } .ticket-chiffres b { display: block; font: 800 1.35rem var(--titres); color: var(--acide); } .ticket-chiffres span { display: block; font-size: .68rem; line-height: 1.25; color: var(--doux); }
.selections { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; border-radius: 9px; overflow: hidden; background: var(--ligne); } .selections li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 10px; background: var(--fond2); font-size: .8rem; } .selections a { min-width: 0; } .selections b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; } .selections small { color: var(--pale); font-size: .7rem; } .selections li > span { text-align: right; flex: none; max-width: 45%; } .selections em { font-style: normal; color: var(--acide); font-weight: 700; } .selections .s-gagne { box-shadow: inset 3px 0 var(--vert); } .selections .s-perdu { box-shadow: inset 3px 0 var(--rouge); }
.grille-a { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.actu { display: grid; align-content: start; overflow: hidden; border-radius: 14px; background: var(--carte); border: 1px solid var(--ligne); } .actu img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .actu > div { display: grid; gap: 7px; padding: 14px; } .actu small { color: var(--pale); font-size: .74rem; } .actu h3 { text-transform: none; font-size: 1.25rem; line-height: 1.12; } .actu p { color: var(--doux); font-size: .86rem; }
.pubs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 16px; } .pub { display: grid; gap: 5px; padding: 13px; border-radius: 12px; background: var(--fond2); border: 1px dashed var(--ligne2); } .pub small { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--pale); } .pub img { width: 100%; max-height: 140px; object-fit: cover; border-radius: 8px; } .pub span { color: var(--doux); font-size: .84rem; }
.match-tete { padding: clamp(22px, 4vw, 42px) var(--marge); background: radial-gradient(700px 240px at 50% 0, rgba(198, 241, 53, .1), transparent), var(--fond2); border-bottom: 1px solid var(--ligne); }
.match-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-bottom: 16px; font-size: .82rem; color: var(--doux); }
.match-equipes { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(10px, 3vw, 34px); align-items: center; max-width: 900px; margin: auto; } .match-equipes > div:not(.match-score) { display: grid; justify-items: center; gap: 9px; text-align: center; min-width: 0; } .match-equipes img { width: clamp(50px, 9vw, 84px); height: clamp(50px, 9vw, 84px); object-fit: contain; } .match-equipes h1 { font-size: clamp(1.2rem, 3.6vw, 2.5rem); overflow-wrap: anywhere; }
.match-score { text-align: center; } .match-score b { display: block; font: 800 clamp(2.2rem, 7vw, 4.2rem) var(--titres); line-height: 1; white-space: nowrap; } .match-score span { display: block; margin-top: 5px; font-size: .78rem; color: var(--doux); }
.match-corps { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; padding: 18px var(--marge) 42px; align-items: start; } .col-g, .col-d { display: grid; gap: 14px; min-width: 0; }
.bloc { padding: 18px; border-radius: 14px; background: var(--fond2); border: 1px solid var(--ligne); min-width: 0; } .bloc h2 { font-size: 1.45rem; margin-bottom: 12px; } .bloc h4, .compo h4 { margin: 10px 0 7px; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--pale); } .bloc-prono { display: grid; gap: 11px; border-color: rgba(198, 241, 53, .32); } .bloc-prono h2 { margin: 0; }
.deux-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.petit-stat { display: grid; gap: 2px; padding: 10px; border-radius: 9px; background: var(--carte); margin-top: 10px; } .petit-stat span { font-size: .76rem; color: var(--doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .petit-stat b { font: 800 1.45rem var(--titres); }
.pile { display: flex; gap: 2px; height: 14px; } .pile i { border-radius: 4px; min-width: 2px; } .pile .t0 { background: var(--acide); } .pile .t1 { background: #5b6b62; } .pile .t2 { background: var(--ciel); } .pile:has(.t1:last-child) .t1 { background: var(--ciel); }
.pile-noms { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; } .pile-noms div { min-width: 0; } .pile-noms div:last-child { text-align: right; } .pile-noms div:nth-child(2):not(:last-child) { text-align: center; } .pile-noms b { display: block; font: 800 1.6rem var(--titres); } .pile-noms span { font-size: .76rem; color: var(--doux); overflow-wrap: anywhere; }
.courbe { position: relative; margin: 0; } .courbe svg { display: block; width: 100%; height: auto; touch-action: pan-y; } .courbe .grille { display: block; stroke: var(--ligne); stroke-width: 1; } .courbe .axe { fill: var(--pale); font-size: 12px; } .courbe .etiq { fill: var(--doux); font-size: 12px; font-weight: 600; } .courbe .repere { stroke: var(--ligne2); stroke-width: 1; }
.courbe figcaption, .legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: .78rem; color: var(--doux); } .courbe figcaption i, .legende i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; }
.bulle { position: absolute; top: 4px; width: 160px; padding: 7px 9px; border-radius: 8px; background: var(--carte2); border: 1px solid var(--ligne2); font-size: .76rem; pointer-events: none; z-index: 2; } .bulle small { display: block; color: var(--pale); font-size: .68rem; margin-bottom: 3px; } .bulle div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forme { min-width: 0; } .forme h4 { margin-top: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .forme-p { display: flex; gap: 4px; margin-bottom: 8px; } .forme-p .pastille { width: 26px; justify-content: center; padding: 3px 0; } .forme ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: .78rem; color: var(--doux); } .forme li { display: flex; justify-content: space-between; gap: 8px; } .forme li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .forme li b { color: var(--texte); flex: none; }
.compo { min-width: 0; } .compo h3 { font-size: 1.15rem; margin-bottom: 8px; } .compo h3 small { color: var(--acide); font-size: .95rem; margin-left: 5px; }
.joueurs { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; } .joueurs li { display: flex; gap: 9px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--ligne); } .joueurs .num { flex: none; width: 26px; text-align: center; font: 700 1rem var(--titres); color: var(--pale); } .joueurs li > div { flex: 1; min-width: 0; } .joueurs b { display: block; font-size: .86rem; font-weight: 600; overflow-wrap: anywhere; } .joueurs small { display: block; font-size: .72rem; color: var(--doux); } .joueurs small.pale { color: var(--pale); } details summary { margin: 10px 0 4px; cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--acide); }
.terrain-compo { display: flex; flex-direction: column; gap: 7px; padding: 10px 4px; margin-bottom: 8px; border-radius: 10px; background: repeating-linear-gradient(0deg, #12331f 0 28px, #0f2b1a 28px 56px); border: 1px solid rgba(255, 255, 255, .25); } .rang { display: flex; justify-content: space-around; } .pion { display: grid; justify-items: center; gap: 2px; width: 20%; min-width: 0; } .pion i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--acide); color: #0b1505; font: 700 .72rem var(--corps); } .terrain-compo.ext .pion i { background: var(--ciel); } .pion small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .62rem; color: #fff; }
.fil { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; } .fil li { display: flex; gap: 11px; padding: 8px 0; border-bottom: 1px solid var(--ligne); font-size: .86rem; } .fil time { flex: none; width: 42px; color: var(--pale); font-weight: 600; } .fil b { display: block; } .fil span { font-size: .78rem; color: var(--doux); } .fil .but b { color: var(--acide); } .fil .jaune b { color: var(--ambre); } .fil .rouge b { color: var(--rouge); }
.cmp { display: grid; grid-template-columns: 62px minmax(0, 1fr) 62px; gap: 8px; align-items: center; padding: 6px 0; font-size: .84rem; } .cmp > b:last-child { text-align: right; } .cmp span { display: block; text-align: center; font-size: .74rem; color: var(--doux); } .cmp-b { display: flex; gap: 2px; height: 6px; margin-top: 3px; } .cmp-b i { background: var(--acide); border-radius: 3px; } .cmp-b u { background: var(--ciel); border-radius: 3px; text-decoration: none; }
.cotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin-bottom: 8px; } .cotes div { padding: 9px; border-radius: 9px; background: var(--carte); min-width: 0; } .cotes span { display: block; font-size: .72rem; color: var(--doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cotes b { font: 800 1.3rem var(--titres); }
.quiz { display: grid; gap: 12px; } .q p { color: var(--texte); margin-bottom: 6px; font-weight: 500; } .q .puces { margin: 0; }
.pied-haut { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; } .pied-haut .marque { font-size: 1.15rem; color: var(--texte); } .pied-haut .marque i { width: 24px; height: 24px; }
@media (max-width: 960px) { .match-corps { grid-template-columns: 1fr; } .col-d { order: 2; } }
@media (max-width: 480px) { .barre-in .btn.acide { display: none; } }
@media (max-width: 680px) {
  .ligne-match { grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr); padding: 10px; gap: 8px; font-size: .84rem; } .ligne-match .droite { grid-column: 1 / -1; text-align: center; } .ligne-match .droite:empty { display: none; }
  .ligne-match img { width: 22px; height: 22px; } .ligne-match .eq { gap: 6px; }
  .deux-cols { grid-template-columns: 1fr; } .deux-cols:has(> .petit-stat) { grid-template-columns: 1fr 1fr; } .grille-t, .grille-a { grid-template-columns: 1fr; } .prono-bas .preuve { display: none; }
  .barre-in .btn { padding: 8px 12px; font-size: .84rem; } .bloc { padding: 14px; } .ticket-chiffres b { font-size: 1.15rem; }
}
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; } .terrain { display: none; }
  .chiffres { grid-template-columns: 1fr 1fr; } .chiffres > div { padding: 14px 16px; }
  .nav { order: 3; flex-basis: 100%; overflow-x: auto; gap: 16px; padding-bottom: 2px; } .barre-in { flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; }
  .grille { grid-template-columns: 1fr; }
}