/* ============================================================ MES RÉGLAGES — application des préférences d'apparence (16/07/2026) Ces règles ne font RIEN tant que le membre n'a pas choisi une préférence : elles ne s'activent que via les classes mr-* posées sur par includes/header.php (user_prefs_body_classes()). ============================================================ */ /* ---------- Taille des textes ---------- Le site est écrit en px : un simple font-size:% sur ne redimensionne presque rien (le px n'hérite pas). On utilise donc `zoom` sur la zone de CONTENU (.pub-content) : le texte ET le contenu grossissent pour de vrai, tandis que la barre du haut et le rail (hors .pub-content) restent stables. Exception : la carte (Leaflet gère mal le zoom d'un conteneur parent → clics et tuiles décalés), donc on la laisse à l'échelle 1. */ body.mr-txt-petit .pub-content { zoom: .94; } body.mr-txt-grand .pub-content { zoom: 1.12; } body.mr-txt-tresgrand .pub-content { zoom: 1.24; } body.mr-txt-petit.page-carte .pub-content, body.mr-txt-grand.page-carte .pub-content, body.mr-txt-tresgrand.page-carte .pub-content { zoom: 1; } /* ---------- Animations réduites / désactivées ---------- */ /* « réduit » : on garde les transitions courtes, on coupe les boucles décoratives. */ body.mr-anim-reduit *, body.mr-anim-reduit *::before, body.mr-anim-reduit *::after { animation-iteration-count: 1 !important; animation-duration: .15s !important; } /* « off » : plus aucune animation ni transition décorative. */ body.mr-anim-off *, body.mr-anim-off *::before, body.mr-anim-off *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Les vidéos décoratives (Gardien du rail) sont figées quand les animations sont coupées. */ body.mr-anim-off .pub-rail-brand video { display: none; } body.mr-anim-off .pub-rail-brand::after { content: '🔥'; display: flex; align-items: center; justify-content: center; font-size: 26px; } /* ---------- Contraste renforcé ---------- */ body.mr-contrast { --mr-ink: #ffffff; } body.mr-contrast .pub-content, body.mr-contrast .pub-content p, body.mr-contrast .pub-content span, body.mr-contrast .pub-content label { color: rgba(255,255,255,.96); } body.mr-contrast .card, body.mr-contrast .pub-content .card { border-color: rgba(255,255,255,.45) !important; } /* En mode clair (phare-light / fond de page), le contraste renforcé fonce le texte au lieu de l'éclaircir. */ body.mr-contrast.phare-light .pub-content, body.mr-contrast.phare-light .pub-content p, body.mr-contrast.phare-light .pub-content span, body.mr-contrast.phare-light .pub-content label, body.mr-contrast.has-pagebg .pub-content, body.mr-contrast.has-pagebg .pub-content p, body.mr-contrast.has-pagebg .pub-content span, body.mr-contrast.has-pagebg .pub-content label { color: #0b0e14; } /* ---------- Liens soulignés ---------- */ body.mr-links .pub-content a { text-decoration: underline !important; text-underline-offset: 2px; } /* ---------- Réduire la transparence (panneaux plus opaques = plus lisibles) ---------- */ body.mr-solid .card, body.mr-solid .pub-content .card, body.mr-solid details.card { background: rgba(8, 18, 30, .92) !important; backdrop-filter: none !important; } body.mr-solid.phare-light .card, body.mr-solid.phare-light .pub-content .card, body.mr-solid.has-pagebg .card { background: rgba(255, 255, 255, .95) !important; } /* ---------- Économie de données ---------- */ /* On coupe la vidéo décorative du rail et le fond d'image de page (déco). Les fonctions restent. */ body.mr-datasaver .pub-rail-brand video { display: none; } body.mr-datasaver .pub-rail-brand::after { content: '🔥'; display: flex; align-items: center; justify-content: center; font-size: 26px; } body.mr-datasaver.has-pagebg { background-image: none !important; } /* ============================================================ Page reglages.php — habillage (réutilise les variables du site : palette dorée, cartes .card ; panneaux sombres semi-opaques lisibles sur fond clair — motif « souvenirs » du 16/07) ============================================================ */ .mrg-wrap { display: grid; grid-template-columns: 250px 1fr; gap: 18px; align-items: start; } @media (max-width: 900px) { .mrg-wrap { grid-template-columns: 1fr; } } .mrg-menu { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 6px; } @media (max-width: 900px) { .mrg-menu { position: static; flex-direction: row; flex-wrap: wrap; } } .mrg-menu a { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 11px; border: 1px solid rgba(212,185,140,.22); background: rgba(8,18,30,.60); color: #e7d8b6; text-decoration: none; font: 600 13.5px/1.2 'Inter', system-ui, sans-serif; backdrop-filter: blur(3px); } .mrg-menu a:hover { background: rgba(212,185,140,.14); } .mrg-menu a.is-active { background: rgba(212,185,140,.18); color: #F3D58A; border-color: rgba(212,185,140,.45); } .mrg-menu a .mrg-mico { font-size: 15px; } .mrg-sec { margin: 0 0 16px; padding: 16px 18px; border: 1px solid rgba(212,185,140,.22); border-radius: 14px; background: rgba(8,18,30,.62); backdrop-filter: blur(4px); scroll-margin-top: 16px; } /* MODE ONGLETS (activé par le JS) : on n'affiche QUE la section choisie dans le menu. Sans JS, toutes les sections restent visibles (aucune régression). */ .mrg-cols.mrg-tabs > .mrg-sec { display: none; } .mrg-cols.mrg-tabs > .mrg-sec.is-shown { display: block; } /* Pendant une recherche : on réaffiche tout et on masque ce qui ne correspond pas. */ .mrg-sec.mrg-nohit { display: none !important; } .mrg-row.mrg-rowhide { display: none; } .mrg-sec > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; } .mrg-sec > summary::-webkit-details-marker { display: none; } .mrg-sec-t { font: 700 16px/1.25 'Inter', system-ui, sans-serif; color: #F3D58A; } .mrg-sec-d { margin: 2px 0 0; font-size: 12.5px; color: rgba(250,247,240,.72); } .mrg-sec-etat { margin-left: auto; font-size: 11.5px; color: rgba(250,247,240,.62); text-align: right; white-space: nowrap; } /* Mobile : l'état (parfois long, ex. résumé du Passeport) peut revenir à la ligne pour ne jamais provoquer de défilement horizontal. */ @media (max-width: 620px) { .mrg-sec > summary { flex-wrap: wrap; } .mrg-sec-etat { white-space: normal; min-width: 0; text-align: left; } .mrg-sec-t { min-width: 0; } } .mrg-sec-chev { color: rgba(250,247,240,.5); transition: transform .15s; } .mrg-sec:not([open]) .mrg-sec-chev { transform: rotate(-90deg); } .mrg-sec-body { margin-top: 14px; border-top: 1px solid rgba(212,185,140,.14); padding-top: 12px; } .mrg-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(212,185,140,.10); } .mrg-row:first-child { border-top: 0; } .mrg-row-txt { flex: 1; min-width: 0; } .mrg-row-l { font: 600 13.5px/1.3 'Inter', system-ui, sans-serif; color: #FAF7F0; } .mrg-row-d { margin: 3px 0 0; font-size: 12.3px; line-height: 1.45; color: rgba(250,247,240,.66); } .mrg-row-ctl { flex-shrink: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } @media (max-width: 620px) { .mrg-row { flex-direction: column; gap: 8px; } .mrg-row-ctl { justify-content: flex-start; } } /* Interrupteur (checkbox habillée) */ .mrg-sw { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; } .mrg-sw input { opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .mrg-sw i { position: absolute; inset: 0; border-radius: 100px; background: rgba(250,247,240,.18); border: 1px solid rgba(212,185,140,.35); pointer-events: none; transition: background .15s; } .mrg-sw i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #e7d8b6; transition: transform .15s; } .mrg-sw input:checked + i { background: #C9A45C; } .mrg-sw input:checked + i::after { transform: translateX(20px); background: #1a1206; } .mrg-sw input:focus-visible + i { outline: 2px solid #F3D58A; outline-offset: 2px; } /* Choix segmenté (radios) */ .mrg-seg { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid rgba(212,185,140,.35); border-radius: 10px; overflow: hidden; } .mrg-seg label { position: relative; } .mrg-seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .mrg-seg span { display: inline-block; padding: 7px 13px; font: 600 12.5px/1 'Inter', sans-serif; color: #e7d8b6; background: rgba(8,18,30,.4); border-left: 1px solid rgba(212,185,140,.18); cursor: pointer; } .mrg-seg label:first-child span { border-left: 0; } .mrg-seg input:checked + span { background: #C9A45C; color: #1a1206; } .mrg-seg input:focus-visible + span { outline: 2px solid #F3D58A; outline-offset: -2px; } /* Boutons */ .mrg-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 10px; border: 1px solid rgba(212,185,140,.4); background: rgba(212,185,140,.10); color: #F3D58A; font: 600 13px/1 'Inter', sans-serif; cursor: pointer; text-decoration: none; } .mrg-btn:hover { background: rgba(212,185,140,.18); } .mrg-btn-danger { border-color: rgba(220,90,90,.45); background: rgba(220,90,90,.10); color: #ec9090; } .mrg-btn-danger:hover { background: rgba(220,90,90,.18); } /* Pastilles d'état */ .mrg-tag { display: inline-block; padding: 3px 9px; border-radius: 100px; font: 700 10.5px/1.3 'Inter', sans-serif; } .mrg-tag-on { background: rgba(95,195,138,.16); color: #7fd6a4; border: 1px solid rgba(95,195,138,.4); } .mrg-tag-off { background: rgba(250,247,240,.08); color: rgba(250,247,240,.6); border: 1px solid rgba(250,247,240,.2); } .mrg-tag-prep { background: rgba(150,170,220,.12); color: #aebfe8; border: 1px solid rgba(150,170,220,.35); } .mrg-tag-lock { background: rgba(220,170,90,.12); color: #e8c58a; border: 1px solid rgba(220,170,90,.4); } /* Réglage « en préparation » : verrouillé, jamais trompeur */ .mrg-row.is-prep { opacity: .62; } .mrg-row.is-prep .mrg-row-ctl { pointer-events: none; } /* Zone sensible */ .mrg-danger { border-color: rgba(220,90,90,.4) !important; } .mrg-danger .mrg-sec-t { color: #ec9090; } /* Recherche */ .mrg-search { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid rgba(212,185,140,.3); border-radius: 12px; background: rgba(8,18,30,.62); } .mrg-search input { flex: 1; background: transparent; border: 0; outline: 0; color: #FAF7F0; font: 500 14px/1.3 'Inter', sans-serif; } .mrg-search input::placeholder { color: rgba(250,247,240,.45); } .mrg-hit { outline: 2px solid #F3D58A; outline-offset: 3px; border-radius: 8px; } /* Toast « Réglage enregistré » */ .mrg-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px); background: rgba(8,18,30,.95); border: 1px solid rgba(95,195,138,.5); color: #7fd6a4; padding: 10px 18px; border-radius: 100px; font: 600 13px/1 'Inter', sans-serif; z-index: 4000; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; } .mrg-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); } .mrg-toast.is-err { border-color: rgba(220,90,90,.55); color: #ec9090; } /* Lisibilité sur fond CLAIR (phare-light ou image de fond posée par l'admin) : les panneaux restent sombres semi-opaques (motif souvenirs 16/07) → rien à surcharger, mais on force quelques textes hors panneaux. */ body.page-reglages.phare-light .page-title, body.page-reglages.has-pagebg .page-title { text-shadow: 0 1px 8px rgba(0,0,0,.55); } body.page-reglages.phare-light .page-subtitle, body.page-reglages.has-pagebg .page-subtitle { color: #f4efe4; text-shadow: 0 1px 6px rgba(0,0,0,.6); }