/* GDB.monster — style « cartoon » : contours d'encre epais, ombres franches decalees, couleurs vives, coins tres arrondis. Deux themes (clair, nuit), choisis par le systeme ou par le bouton (data-theme sur ). */ @font-face { font-family: 'Fredoka'; src: url('/polices/fredoka.woff2') format('woff2'); font-weight: 300 700; font-display: swap; } @font-face { font-family: 'Nunito'; src: url('/polices/nunito.woff2') format('woff2'); font-weight: 200 1000; font-display: swap; } :root { color-scheme: light; --fond: #fff2d9; --fond-pois: #f7deb0; --carte: #ffffff; --carte-2: #fff8ea; --encre: #1c1a2e; --texte: #1c1a2e; --texte-2: #4b4862; --texte-3: #66637d; --grille: #ebe6f3; --accent: #7c4dff; --accent-doux: #efe8ff; --orange: #ff8a3d; --jaune: #ffd23f; --menthe: #3ddc97; --rose: #ff6b9a; --ciel: #5bc8f5; /* Series des graphiques : palette categorielle validee (daltonisme), ordre fixe. */ --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --serie-4: #eda100; --serie-5: #e87ba4; --serie-6: #008300; --serie-7: #4a3aa7; /* Etats : reserves, toujours accompagnes d'une icone et d'un mot. */ --bon: #0ca30c; --attention: #fab219; --grave: #ec835a; --critique: #d03b3b; /* Rampe sequentielle (bleu), du presque rien au beaucoup. */ --seq-0: #efedf4; --seq-1: #b7d3f6; --seq-2: #6da7ec; --seq-3: #2a78d6; --seq-4: #184f95; --trait: 3px; --ombre: 5px 5px 0 var(--encre); --ombre-haute: 8px 8px 0 var(--encre); --ombre-petite: 3px 3px 0 var(--encre); --rayon: 24px; --rayon-petit: 14px; --titre: 'Fredoka', 'Nunito', system-ui, sans-serif; --corps: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme='light'])) { color-scheme: dark; --fond: #2a2463; --fond-pois: #362f7c; --carte: #1c1a37; --carte-2: #262349; --encre: #04030a; --texte: #f5f2ff; --texte-2: #cbc7e6; --texte-3: #a7a3c4; --grille: #35325e; --accent: #9b7bff; --accent-doux: #2f2a5c; --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --serie-4: #c98500; --serie-5: #d55181; --serie-6: #008300; --serie-7: #9085e9; --seq-0: #2d3050; --seq-1: #184f95; --seq-2: #256abf; --seq-3: #3987e5; --seq-4: #86b6ef; } } :root[data-theme='dark'] { color-scheme: dark; --fond: #2a2463; --fond-pois: #362f7c; --carte: #1c1a37; --carte-2: #262349; --encre: #04030a; --texte: #f5f2ff; --texte-2: #cbc7e6; --texte-3: #a7a3c4; --grille: #35325e; --accent: #9b7bff; --accent-doux: #2f2a5c; --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --serie-4: #c98500; --serie-5: #d55181; --serie-6: #008300; --serie-7: #9085e9; --seq-0: #2d3050; --seq-1: #184f95; --seq-2: #256abf; --seq-3: #3987e5; --seq-4: #86b6ef; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; } body { margin: 0; min-height: 100vh; font: 500 16px/1.5 var(--corps); color: var(--texte); background-color: var(--fond); background-image: radial-gradient(var(--fond-pois) 2px, transparent 2.6px); background-size: 26px 26px; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: inherit; } h1, h2, h3 { font-family: var(--titre); line-height: 1.1; margin: 0; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; } [hidden] { display: none !important; } .evitement { position: absolute; left: -9999px; top: 8px; z-index: 100; } .evitement:focus { left: 16px; } .visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .cadre { width: min(1240px, 100% - 32px); margin-inline: auto; } /* ---------- En-tete ---------- */ .entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 28px 0 18px; } .marque { display: flex; align-items: center; gap: 16px; text-decoration: none; min-width: 0; } .monstre { width: 92px; height: 92px; flex: none; animation: flotte 4s ease-in-out infinite; filter: drop-shadow(4px 4px 0 var(--encre)); } .monstre .oeil { transform-box: fill-box; transform-origin: center; animation: cligne 5s infinite; } .monstre .oeil + .oeil { animation-delay: 0.04s; } .monstre .pupille { transition: transform 0.12s ease-out; } .monstre .bras-g { transform-box: fill-box; transform-origin: 90% 80%; animation: salut 3.2s ease-in-out infinite; } .titre-site { font-size: clamp(34px, 6vw, 56px); font-weight: 700; letter-spacing: -0.5px; color: var(--texte); text-shadow: 3px 3px 0 var(--carte); } .titre-site .point-monster { color: var(--accent); -webkit-text-stroke: 0; text-shadow: 3px 3px 0 var(--encre); } .devise { margin: 6px 0 0; color: var(--texte-2); font-weight: 700; font-size: 17px; } .actions-entete { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } /* ---------- Boutons ---------- */ .bouton { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; font: 600 15px/1 var(--titre); color: #1c1a2e; background: var(--jaune); border: var(--trait) solid var(--encre); border-radius: 999px; box-shadow: var(--ombre-petite); cursor: pointer; text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease; white-space: nowrap; } .bouton:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--encre); } .bouton:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--encre); } .bouton.secondaire { background: var(--carte); color: var(--texte); } .bouton.violet { background: var(--accent); color: #fff; } .bouton.menthe { background: var(--menthe); } .bouton.rond { width: 46px; height: 46px; padding: 0; justify-content: center; } .bouton.petit { padding: 7px 12px; font-size: 13px; } .bouton[disabled] { opacity: 0.55; cursor: progress; } .bouton svg { width: 20px; height: 20px; } /* ---------- Navigation (proprietaire) ---------- */ .onglets { position: sticky; top: 10px; z-index: 20; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 7px; margin: 4px 0 26px; background: color-mix(in srgb, var(--carte) 88%, transparent); backdrop-filter: blur(10px); border: var(--trait) solid var(--encre); border-radius: 999px; box-shadow: var(--ombre-petite); } .onglets::-webkit-scrollbar { display: none; } .onglets a { flex: none; padding: 8px 14px; border-radius: 999px; font: 600 14px/1 var(--titre); text-decoration: none; color: var(--texte-2); border: 2px solid transparent; } .onglets a:hover { color: var(--texte); background: var(--carte-2); } .onglets a[aria-current='true'] { color: #1c1a2e; background: var(--jaune); border-color: var(--encre); } /* ---------- Sections ---------- */ .section { margin: 0 0 44px; } .titre-section { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .titre-section h2 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; position: relative; z-index: 0; } .titre-section h2::after { content: ''; position: absolute; left: -4px; right: -6px; bottom: 2px; height: 12px; z-index: -1; border-radius: 6px; background: var(--jaune); transform: rotate(-1.5deg); } .titre-section .emoji { width: 44px; height: 44px; display: grid; place-items: center; font-size: 24px; background: var(--carte); border: var(--trait) solid var(--encre); border-radius: 14px; box-shadow: var(--ombre-petite); transform: rotate(-6deg); } .titre-section .sous-titre { color: var(--texte-3); font-weight: 700; font-size: 14px; margin-left: auto; } .carte { background: var(--carte); border: var(--trait) solid var(--encre); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 20px; min-width: 0; } .carte h3 { font-size: 19px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .carte .entete-carte { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .carte .note { color: var(--texte-3); font-size: 13px; font-weight: 700; } .bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; } .l-12 { grid-column: span 12; } .l-8 { grid-column: span 8; } .l-7 { grid-column: span 7; } .l-6 { grid-column: span 6; } .l-5 { grid-column: span 5; } .l-4 { grid-column: span 4; } .l-3 { grid-column: span 3; } @media (max-width: 1020px) { .l-8, .l-7, .l-6, .l-5, .l-4 { grid-column: span 12; } .l-3 { grid-column: span 6; } } @media (max-width: 560px) { .bento { gap: 16px; } .l-3 { grid-column: span 12; } .carte { padding: 16px; border-radius: 20px; } } /* ---------- Applis ---------- */ .grille-applis { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; } .appli { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px; color: inherit; text-decoration: none; background: var(--carte); border: var(--trait) solid var(--encre); border-radius: var(--rayon); box-shadow: var(--ombre); transition: transform 0.15s ease, box-shadow 0.15s ease; overflow: hidden; isolation: isolate; } .appli::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 62px; background: var(--s); opacity: 0.18; z-index: -1; } .appli:hover { transform: translate(-3px, -3px) rotate(-0.4deg); box-shadow: var(--ombre-haute); } .appli:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--encre); } .appli:hover .icone-appli { animation: gigote 0.55s ease-in-out; } .appli-haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .icone-appli { width: 76px; height: 76px; border-radius: 22px; border: var(--trait) solid var(--encre); box-shadow: var(--ombre-petite); background: #fff; object-fit: cover; } .appli h3 { font-size: 22px; font-weight: 700; } .appli p { margin: 0; color: var(--texte-2); font-size: 15px; } .appli-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; flex-wrap: wrap; } .appli-stats { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--texte-3); font-weight: 700; } .appli-stats strong { color: var(--texte); font-size: 16px; } .fleche { font: 700 20px/1 var(--titre); transition: transform 0.15s; } .appli:hover .fleche { transform: translateX(4px); } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font: 600 12px/1.2 var(--titre); border: 2px solid var(--encre); border-radius: 999px; background: var(--carte); color: var(--texte); white-space: nowrap; } .badge.public { background: var(--menthe); color: #1c1a2e; } .badge.prive { background: var(--rose); color: #1c1a2e; } .badge.auto { background: var(--ciel); color: #1c1a2e; } .badge.discret { background: var(--carte-2); } .statut { display: inline-flex; align-items: center; gap: 7px; font: 700 13px/1 var(--corps); color: var(--texte-2); } .statut .voyant { position: relative; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--encre); background: var(--texte-3); flex: none; } .statut.en-ligne .voyant { background: var(--bon); } .statut.en-ligne .voyant::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--bon); animation: pulse 2s ease-out infinite; } .statut.protege .voyant { background: var(--accent); } .statut.hors-ligne .voyant { background: var(--critique); } /* ---------- Tuiles de chiffres ---------- */ .tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; } .tuile { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--carte); border: var(--trait) solid var(--encre); border-radius: 20px; box-shadow: var(--ombre); min-width: 0; } .tuile:nth-child(odd) { transform: rotate(-0.6deg); } .tuile:nth-child(even) { transform: rotate(0.5deg); } .tuile-libelle { font: 600 14px/1.2 var(--titre); color: var(--texte-2); display: flex; align-items: center; gap: 6px; } .tuile-valeur { font: 850 32px/1.05 var(--corps); letter-spacing: -0.5px; } .tuile-valeur small { font-size: 15px; font-weight: 800; color: var(--texte-3); margin-left: 4px; } .tuile-milieu { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; min-width: 0; } .tuile-pied { font-size: 13px; font-weight: 700; color: var(--texte-3); } .tuile .sparkline { flex: none; } .chiffre-hero { font: 900 clamp(44px, 7vw, 64px) / 1 var(--corps); letter-spacing: -1px; } /* ---------- Graphiques ---------- */ .graphe { width: 100%; min-height: 60px; } .graphe svg { overflow: visible; } .axe text { fill: var(--texte-3); font: 700 11px var(--corps); font-variant-numeric: tabular-nums; } .grille line { stroke: var(--grille); stroke-width: 1; } .s1 { --s: var(--serie-1); } .s2 { --s: var(--serie-2); } .s3 { --s: var(--serie-3); } .s4 { --s: var(--serie-4); } .s5 { --s: var(--serie-5); } .s6 { --s: var(--serie-6); } .s7 { --s: var(--serie-7); } .ligne { fill: none; stroke: var(--s); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .aire { fill: var(--s); opacity: 0.12; } .point { fill: var(--s); stroke: var(--carte); stroke-width: 2; } .barre { fill: var(--s); } .cible { fill: transparent; cursor: crosshair; } .cible:hover + .barre, .barre:has(+ .cible:hover) { opacity: 0.8; } .etiquette { fill: var(--texte); font: 800 11px var(--corps); } .reticule { stroke: var(--texte-3); stroke-width: 1; } .zone-survol { fill: transparent; cursor: crosshair; } .sparkline .ligne { stroke-width: 2; } .calendrier-boite { overflow-x: auto; padding-bottom: 6px; } .calendrier rect { stroke: var(--carte); stroke-width: 0; } .calendrier rect:hover { stroke: var(--encre); stroke-width: 2; } .calendrier .n0 { fill: var(--seq-0); } .calendrier .n1 { fill: var(--seq-1); } .calendrier .n2 { fill: var(--seq-2); } .calendrier .n3 { fill: var(--seq-3); } .calendrier .n4 { fill: var(--seq-4); } .echelle-cal { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--texte-3); } .echelle-cal span.case { width: 12px; height: 12px; border-radius: 3px; } .case.n0 { background: var(--seq-0); } .case.n1 { background: var(--seq-1); } .case.n2 { background: var(--seq-2); } .case.n3 { background: var(--seq-3); } .case.n4 { background: var(--seq-4); } /* Barres horizontales */ .barres { display: flex; flex-direction: column; gap: 10px; } .barre-ligne { display: grid; grid-template-columns: minmax(110px, 34%) 1fr auto; align-items: center; gap: 12px; font-weight: 700; font-size: 14px; border-radius: 8px; } .barre-nom { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; } .barre-piste { height: 18px; display: flex; align-items: center; } .barre-pleine { height: 18px; background: var(--s); border-radius: 0 4px 4px 0; } .barre-valeur { font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; } .pastille-serie { width: 12px; height: 12px; border-radius: 4px; background: var(--s); flex: none; } .cle-ligne { width: 16px; height: 3px; border-radius: 2px; background: var(--s); flex: none; display: inline-block; } .legende { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; font-weight: 700; color: var(--texte-2); } .legende li { display: inline-flex; align-items: center; gap: 6px; } .legende strong { color: var(--texte); } .legende-ligne { margin: 0 0 8px; } /* Jauges */ .jauges { display: grid; gap: 16px; } .jauge-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; } .jauge-libelle { font: 600 15px var(--titre); } .jauge-valeur { font: 850 20px var(--corps); display: inline-flex; align-items: center; gap: 8px; } .jauge-piste { height: 16px; border: 2px solid var(--encre); border-radius: 999px; background: var(--carte-2); overflow: hidden; } .jauge-pleine { height: 100%; background: var(--bon); border-right: 2px solid var(--encre); border-radius: 999px; } .niveau-attention .jauge-pleine { background: var(--attention); } .niveau-critique .jauge-pleine { background: var(--critique); } .niveau-inconnu .jauge-pleine { border-right: 0; } .jauge-detail { font-size: 13px; font-weight: 700; color: var(--texte-3); margin-top: 5px; } .etat { display: inline-flex; align-items: center; gap: 4px; font: 700 12px var(--corps); color: var(--texte-2); } .etat-icone { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--encre); display: inline-grid; place-items: center; } .etat-bon .etat-icone { background: var(--bon); } .etat-attention .etat-icone { background: var(--attention); } .etat-critique .etat-icone { background: var(--critique); } .etat-inconnu .etat-icone { background: var(--grille); } /* Repartition */ .repartition-barre { display: flex; gap: 2px; height: 26px; border: 2px solid var(--encre); border-radius: 10px; overflow: hidden; background: var(--carte); } .repartition-seg { background: var(--s); min-width: 3px; } /* Infobulle */ .infobulle { position: fixed; z-index: 60; pointer-events: none; min-width: 120px; max-width: 260px; padding: 10px 12px; background: var(--carte); border: var(--trait) solid var(--encre); border-radius: 14px; box-shadow: var(--ombre-petite); font-size: 13px; } .bulle-titre { font: 600 13px var(--titre); color: var(--texte-2); margin-bottom: 4px; } .bulle-ligne { display: flex; align-items: center; gap: 8px; } .bulle-ligne strong { font-size: 15px; font-weight: 850; } .bulle-ligne span:last-child { color: var(--texte-3); font-weight: 700; } /* Tableau de donnees */ .donnees { margin-top: 12px; font-size: 13px; } .donnees summary { cursor: pointer; font-weight: 800; color: var(--texte-3); width: fit-content; } .table-defile { max-height: 260px; overflow: auto; margin-top: 8px; border: 2px solid var(--grille); border-radius: 12px; } .table-libre { max-height: none; border: 0; margin-top: 0; } table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--grille); white-space: nowrap; } th { position: sticky; top: 0; background: var(--carte-2); font-weight: 800; } /* ---------- Listes ---------- */ .liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .liste > li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 2px dotted var(--grille); min-width: 0; } .liste > li:last-child { border-bottom: 0; } .liste .principal { flex: 1; min-width: 0; } .liste .titre-ligne { font-weight: 800; overflow-wrap: anywhere; } .liste .sous-ligne { font-size: 13px; font-weight: 700; color: var(--texte-3); overflow-wrap: anywhere; } .liste .droite { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .pastille-langue { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--encre); display: inline-block; vertical-align: -1px; } .infos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 0; } .infos div { padding: 10px 12px; background: var(--carte-2); border: 2px solid var(--grille); border-radius: var(--rayon-petit); min-width: 0; } .infos dt { font-size: 12px; font-weight: 800; color: var(--texte-3); text-transform: uppercase; letter-spacing: 0.4px; } .infos dd { margin: 2px 0 0; font-weight: 800; overflow-wrap: anywhere; } /* ---------- Etats vides, erreurs, chargement ---------- */ .squelette { border-radius: 14px; background: linear-gradient(90deg, var(--carte-2) 0%, var(--grille) 50%, var(--carte-2) 100%); background-size: 200% 100%; animation: brille 1.3s linear infinite; min-height: 120px; } .a-brancher { display: flex; gap: 14px; align-items: flex-start; padding: 16px; background: var(--accent-doux); border: 2px dashed var(--accent); border-radius: 16px; font-size: 14px; } .a-brancher .prise { font-size: 28px; line-height: 1; } .a-brancher strong { display: block; font: 600 16px var(--titre); margin-bottom: 2px; } .a-brancher p { margin: 0; color: var(--texte-2); font-weight: 600; } .a-brancher code { font-size: 13px; background: var(--carte); border: 1px solid var(--grille); border-radius: 6px; padding: 1px 5px; } .vide { color: var(--texte-3); font-weight: 700; margin: 0; } .alerte { margin: 0 0 14px; padding: 10px 14px; border: 2px solid var(--encre); border-radius: 14px; background: color-mix(in srgb, var(--attention) 30%, var(--carte)); font-weight: 700; font-size: 14px; } /* ---------- Depenses ---------- */ .table-depenses { width: 100%; } .table-depenses td, .table-depenses th { white-space: normal; vertical-align: middle; } .table-depenses td.num, .table-depenses th.num { text-align: right; white-space: nowrap; } .table-depenses tr.inactif { opacity: 0.5; } .ligne-abonnement { display: flex; align-items: center; gap: 10px; } .logo-categorie { width: 34px; height: 34px; flex: none; display: grid; place-items: center; font-size: 18px; border: 2px solid var(--encre); border-radius: 10px; background: var(--carte-2); } .formulaire { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; } .formulaire label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 800; color: var(--texte-2); } .formulaire input, .formulaire select { padding: 9px 11px; border: 2px solid var(--encre); border-radius: 12px; background: var(--carte); font-weight: 700; min-width: 0; } .formulaire .large { grid-column: 1 / -1; } .formulaire .case-a-cocher { flex-direction: row; align-items: center; gap: 8px; } dialog.modale { width: min(640px, 100% - 24px); max-height: calc(100vh - 40px); padding: 22px; color: var(--texte); background: var(--carte); border: var(--trait) solid var(--encre); border-radius: var(--rayon); box-shadow: var(--ombre-haute); } dialog.modale::backdrop { background: rgba(20, 18, 40, 0.45); backdrop-filter: blur(3px); } .modale h2 { font-size: 24px; margin-bottom: 14px; } .modale-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; } .modale-actions .gauche { margin-right: auto; } .puces { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; } /* Message ephemere */ .toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 70; padding: 12px 18px; font: 600 15px var(--titre); color: #1c1a2e; background: var(--menthe); border: var(--trait) solid var(--encre); border-radius: 999px; box-shadow: var(--ombre-petite); animation: surgit 0.25s ease-out; } .toast.erreur { background: var(--rose); } /* ---------- Public : a propos ---------- */ .bulle-bd { position: relative; max-width: 560px; margin: 0 0 28px; padding: 14px 18px; background: var(--carte); border: var(--trait) solid var(--encre); border-radius: 20px; box-shadow: var(--ombre-petite); font-weight: 700; color: var(--texte-2); } .bulle-bd::before { content: ''; position: absolute; left: 34px; top: -14px; width: 22px; height: 22px; background: var(--carte); border-left: var(--trait) solid var(--encre); border-top: var(--trait) solid var(--encre); transform: rotate(45deg) skew(8deg, 8deg); } /* ---------- Pied ---------- */ .pied { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 26px 0 40px; color: var(--texte-3); font-weight: 700; font-size: 14px; border-top: 3px dashed var(--grille); margin-top: 20px; } /* ---------- Page de refus ---------- */ .page-refus { display: grid; place-items: center; padding: 24px; } .refus { max-width: 520px; text-align: center; display: grid; justify-items: center; gap: 14px; padding: 32px; } .refus h1 { font-size: 28px; } .refus p { margin: 0; color: var(--texte-2); font-weight: 600; } /* ---------- Animations ---------- */ @keyframes flotte { 50% { transform: translateY(-6px) rotate(-2deg); } } @keyframes cligne { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.08); } } @keyframes salut { 0%, 60%, 100% { transform: rotate(0deg); } 70% { transform: rotate(-18deg); } 80% { transform: rotate(8deg); } 90% { transform: rotate(-12deg); } } @keyframes gigote { 25% { transform: rotate(-8deg) scale(1.06); } 50% { transform: rotate(6deg) scale(1.06); } 75% { transform: rotate(-3deg); } } @keyframes pulse { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(1.5); opacity: 0; } } @keyframes brille { from { background-position: 200% 0; } to { background-position: -200% 0; } } @keyframes surgit { from { transform: translate(-50%, 20px); opacity: 0; } } @keyframes apparait { from { transform: translateY(14px); opacity: 0; } } .apparait { animation: apparait 0.4s ease-out both; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ---------- Telephone ---------- */ @media (max-width: 560px) { .cadre { width: calc(100% - 32px); } .entete { padding-top: 18px; } .monstre { width: 68px; height: 68px; } .devise { font-size: 15px; } .grille-applis { grid-template-columns: 1fr 1fr; gap: 14px; } .appli { padding: 14px; gap: 8px; border-radius: 20px; } .appli::before { height: 48px; } .icone-appli { width: 58px; height: 58px; border-radius: 17px; } .appli h3 { font-size: 17px; } .appli p, .appli .sparkline, .appli .fleche { display: none; } .appli-stats span { white-space: nowrap; } .statut { font-size: 12px; } .appli-haut .badge { font-size: 10px; padding: 3px 7px; } .tuiles { grid-template-columns: 1fr 1fr; gap: 12px; } .tuile { padding: 12px 13px; } .tuile-valeur { font-size: 25px; } .tuile .sparkline { display: none; } .barre-ligne { grid-template-columns: minmax(84px, 38%) 1fr auto; gap: 8px; font-size: 13px; } .titre-section .sous-titre { margin-left: 0; width: 100%; } } /* ---------- Le monstre (mascotte) ---------- */ .m-corps { fill: #8b5cf6; stroke: var(--encre); stroke-width: 4; stroke-linejoin: round; } .m-corne { fill: #ff8a3d; stroke: var(--encre); stroke-width: 4; stroke-linejoin: round; } .m-ventre { fill: #b89bff; } .m-joue { fill: #ff6b9a; opacity: 0.7; } .m-blanc { fill: #fff; stroke: var(--encre); stroke-width: 4; } .m-pupille { fill: #1c1a2e; } .m-reflet { fill: #fff; } .m-bouche { fill: #1c1a2e; stroke: var(--encre); stroke-width: 3; stroke-linejoin: round; } .m-langue { fill: #ff6b9a; } .m-croc { fill: #fff; }