/** * MCFR Chunkbase — habillage du bloc carte de seed. * * RÈGLE ABSOLUE : aucune couleur en dur dans ce fichier. * Tout passe par les tokens `--mc-*` du thème (Extraenfant/redesign.css). * C'est ce qui fait fonctionner le mode sombre (`data-theme="dark"` sur ) * sans une seule règle supplémentaire, et ce qui garantit que le bloc suit la * charte si elle évolue. * * Tout est namespacé en `.mcfr-cb*` : aucun sélecteur générique (`button`, * `input`, `label` nus), donc aucune collision possible avec le thème. */ /* ------------------------------------------------------------------------- * 1. Alias locaux — le seul endroit à toucher si un token du thème est renommé * ---------------------------------------------------------------------- */ .mcfr-cb { --cb-accent: var(--mc-tq); --cb-accent-d: var(--mc-tq-d); --cb-ink: var(--mc-ink); --cb-ink-on-accent: var(--mc-strong); --cb-muted: var(--mc-muted); --cb-surface: var(--mc-surface); --cb-alt: var(--mc-bone); --cb-edge: var(--mc-edge); --cb-line: var(--mc-line); --cb-shadow: var(--mc-sh); --cb-shadow-sm: var(--mc-sh-sm); --cb-sans: var(--mc-sans); --cb-display: var(--mc-display); /* Formes : le langage visuel du site est anguleux, sans flou, sans dégradé. */ --cb-border: 2px solid var(--cb-edge); --cb-gap: 10px; --cb-pad: 16px; /* Hauteur de carte : `--cb-h` est posée en style inline par le shortcode (réglage `iframe_height`) et sert de plafond desktop, pas de valeur figée. */ --cb-ratio: 16 / 10; box-sizing: border-box; container-type: inline-size; display: flex; flex-direction: column; gap: var(--cb-gap); max-width: 100%; margin: 0 0 1.5em; padding: var(--cb-pad); background: var(--cb-surface); border: var(--cb-border); border-radius: 0; box-shadow: var(--cb-shadow); color: var(--cb-ink); font-family: var(--cb-sans); } .mcfr-cb *, .mcfr-cb *::before, .mcfr-cb *::after { box-sizing: border-box; } /* ------------------------------------------------------------------------- * 2. Label + champ seed * ---------------------------------------------------------------------- */ .mcfr-cb__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cb-gap); } .mcfr-cb__label { flex: 0 1 auto; margin: 0; color: var(--cb-ink); font-family: var(--cb-sans); font-size: 15px; font-weight: 600; line-height: 1.35; } /* Géométrie du champ : déclarée une fois, aucun thème ne se bat dessus. */ .mcfr-cb .mcfr-cb__seed, #et-boc .mcfr-cb .mcfr-cb__seed { flex: 1 1 220px; min-width: 0; min-height: 44px; margin: 0; padding: 8px 12px; font-size: 15px; line-height: 1.3; } /* Peau du champ, redéclarée dans TOUS les états interactifs. Divi ne style pas seulement `input` mais aussi `input:focus`, avec une spécificité supérieure : ne déclarer la couleur que dans l'état normal laissait le texte passer en noir dès le clic dans le champ — illisible en mode sombre. Chaque état doit donc reposer la couleur lui-même. La variante préfixée `#et-boc` couvre les règles Divi portées par un ID. */ .mcfr-cb .mcfr-cb__seed, .mcfr-cb .mcfr-cb__seed:hover, .mcfr-cb .mcfr-cb__seed:focus, .mcfr-cb .mcfr-cb__seed:focus-visible, .mcfr-cb .mcfr-cb__seed:active, #et-boc .mcfr-cb .mcfr-cb__seed, #et-boc .mcfr-cb .mcfr-cb__seed:hover, #et-boc .mcfr-cb .mcfr-cb__seed:focus, #et-boc .mcfr-cb .mcfr-cb__seed:focus-visible, #et-boc .mcfr-cb .mcfr-cb__seed:active { background: var(--cb-alt); background-image: none; border: var(--cb-border); border-radius: 0; box-shadow: none; color: var(--cb-ink); /* Certains thèmes forcent la couleur du texte par cette propriété, qui l'emporte sur `color` : la poser explicitement est indispensable. */ -webkit-text-fill-color: var(--cb-ink); font-family: var(--cb-sans); text-shadow: none; } /* L'autoremplissage du navigateur impose fond clair et texte sombre. */ .mcfr-cb .mcfr-cb__seed:-webkit-autofill, #et-boc .mcfr-cb .mcfr-cb__seed:-webkit-autofill { -webkit-text-fill-color: var(--cb-ink); box-shadow: 0 0 0 100px var(--cb-alt) inset; } .mcfr-cb .mcfr-cb__seed::placeholder { color: var(--cb-muted); -webkit-text-fill-color: var(--cb-muted); font-size: 12px; letter-spacing: 0.04em; opacity: 1; text-transform: uppercase; } .mcfr-cb .mcfr-cb__seed:focus-visible, #et-boc .mcfr-cb .mcfr-cb__seed:focus-visible { outline: 3px solid var(--cb-accent); outline-offset: 2px; } /* ------------------------------------------------------------------------- * 3. Boutons — composant repris de `.mcfr-gbtn` (redesign.css) à partir des * mêmes tokens. Voir README : pourquoi le plugin redéclare plutôt que de * dépendre du sélecteur du thème, qui ne porte pas dans le corps des pages. * ---------------------------------------------------------------------- */ .mcfr-cb__platforms { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cb-gap); } /* Fond et texte passent par deux variables locales. Chaque variante (segment inactif, segment actif, action principale) se contente de les réassigner, et la « peau » ci-dessous les repose dans tous les états interactifs. Sans ça, Divi reprend la main sur `:hover` — le bouton devenait noir au survol, texte sombre sur fond noir. */ .mcfr-cb .mcfr-cb__btn { --cb-btn-bg: var(--cb-surface); --cb-btn-fg: var(--cb-ink); } .mcfr-cb .mcfr-cb__btn, #et-boc .mcfr-cb .mcfr-cb__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0; padding: 7px 14px; box-shadow: var(--cb-shadow-sm); cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; text-transform: uppercase; transition: transform 0.12s ease, box-shadow 0.12s ease; } /* Peau du bouton, redéclarée dans TOUS les états interactifs. */ .mcfr-cb .mcfr-cb__btn, .mcfr-cb .mcfr-cb__btn:hover, .mcfr-cb .mcfr-cb__btn:focus, .mcfr-cb .mcfr-cb__btn:focus-visible, .mcfr-cb .mcfr-cb__btn:active, #et-boc .mcfr-cb .mcfr-cb__btn, #et-boc .mcfr-cb .mcfr-cb__btn:hover, #et-boc .mcfr-cb .mcfr-cb__btn:focus, #et-boc .mcfr-cb .mcfr-cb__btn:focus-visible, #et-boc .mcfr-cb .mcfr-cb__btn:active { background: var(--cb-btn-bg); background-image: none; border: var(--cb-border); border-radius: 0; color: var(--cb-btn-fg); -webkit-text-fill-color: var(--cb-btn-fg); font-family: var(--cb-sans); text-decoration: none; text-shadow: none; } .mcfr-cb .mcfr-cb__btn:hover, #et-boc .mcfr-cb .mcfr-cb__btn:hover { transform: translate(-1px, -1px); box-shadow: var(--cb-shadow); } .mcfr-cb .mcfr-cb__btn:active, #et-boc .mcfr-cb .mcfr-cb__btn:active { /* L'ombre s'écrase : effet d'enfoncement de la charte. */ transform: translate(1px, 1px); box-shadow: none; } .mcfr-cb .mcfr-cb__btn:focus-visible, #et-boc .mcfr-cb .mcfr-cb__btn:focus-visible { outline: 3px solid var(--cb-accent); outline-offset: 2px; } /* --- Groupe segmenté Java / Bedrock --- */ .mcfr-cb .mcfr-cb__platform { --cb-btn-bg: var(--cb-alt); } /* Bordures mutualisées : les deux boutons se lisent comme un seul contrôle. */ .mcfr-cb .mcfr-cb__platform + .mcfr-cb__platform { margin-left: calc(var(--cb-gap) * -1 - 2px); } /* État actif : contraste franc avec l'état inactif — c'est le défaut principal du rendu actuel, où deux gris quasi identiques cohabitent. */ .mcfr-cb .mcfr-cb__platform.is-active { position: relative; z-index: 1; --cb-btn-bg: var(--cb-accent); --cb-btn-fg: var(--cb-ink-on-accent); } /* Pas d'assombrissement au survol : `--mc-tq-d` est un turquoise FONCÉ en mode clair, et le texte du bouton est déjà quasi noir — le contraste tombait à 2.98:1. Le retour de survol est celui de la charte : translation + ombre. */ /* Sur fond accent, l'outline accent serait invisible : on bascule sur l'encre. */ .mcfr-cb .mcfr-cb__platform.is-active:focus-visible, .mcfr-cb .mcfr-cb__update:focus-visible, #et-boc .mcfr-cb .mcfr-cb__platform.is-active:focus-visible, #et-boc .mcfr-cb .mcfr-cb__update:focus-visible { outline-color: var(--cb-ink); } /* --- Action principale --- */ .mcfr-cb .mcfr-cb__update { --cb-btn-bg: var(--cb-accent); --cb-btn-fg: var(--cb-ink-on-accent); } .mcfr-cb .mcfr-cb__update, #et-boc .mcfr-cb .mcfr-cb__update { margin-left: auto; padding: 7px 18px; box-shadow: var(--cb-shadow); } .mcfr-cb .mcfr-cb__update[aria-busy="true"] { cursor: progress; opacity: 0.75; } .mcfr-cb__icon { display: block; flex: 0 0 auto; } /* ------------------------------------------------------------------------- * 4. Carte * ---------------------------------------------------------------------- */ .mcfr-cb__map { position: relative; width: 100%; /* aspect-ratio réserve la place avant chargement : zéro CLS. */ aspect-ratio: var(--cb-ratio); max-height: var(--cb-h, 461px); min-height: 240px; background: var(--cb-alt); border: var(--cb-border); overflow: hidden; } .mcfr-cb__iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: 100%; border: 0; /* L'intérieur de la carte est cross-origin : non stylable, et il reste clair en mode sombre. On ne tente aucun filtre (invert détruirait les couleurs de biomes) : c'est le cadre qui encaisse la transition. */ } /* --- Indicateur de chargement --- */ .mcfr-cb__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--cb-surface) 78%, transparent); } .mcfr-cb__overlay[hidden] { display: none; } .mcfr-cb__blocks { display: flex; gap: 6px; } /* Carrés pleins plutôt qu'un spinner : le radius est à 0 partout sur le site. */ .mcfr-cb__blocks i { display: block; width: 12px; height: 12px; background: var(--cb-accent); animation: mcfr-cb-pulse 0.9s steps(2, end) infinite; } .mcfr-cb__blocks i:nth-child(2) { animation-delay: 0.15s; } .mcfr-cb__blocks i:nth-child(3) { animation-delay: 0.3s; } @keyframes mcfr-cb-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } } /* ------------------------------------------------------------------------- * 5. Statut et crédit * ---------------------------------------------------------------------- */ .mcfr-cb__status { min-height: 1.2em; margin: 0; color: var(--cb-muted); font-family: var(--cb-sans); font-size: 13px; line-height: 1.2; } .mcfr-cb__status:empty { display: none; } .mcfr-cb__credit { margin: 0; color: var(--cb-muted); font-family: var(--cb-sans); font-size: 12px; text-align: center; } .mcfr-cb .mcfr-cb__credit-link, #et-boc .mcfr-cb .mcfr-cb__credit-link { color: var(--cb-accent-d); text-decoration: underline; text-underline-offset: 2px; } .mcfr-cb .mcfr-cb__credit-link:hover, #et-boc .mcfr-cb .mcfr-cb__credit-link:hover { color: var(--cb-ink); } /* Avertissement réservé aux administrateurs (structure inconnue). */ .mcfr-cb-warning { padding: 10px 14px; background: var(--mc-bone); border: 2px solid var(--mc-gold-d); color: var(--mc-ink); font-family: var(--mc-sans); font-size: 13px; } /* ------------------------------------------------------------------------- * 6. Responsive — paliers repris de redesign.css (900 / 600 / 560), * doublés en container queries pour le cas « colonne étroite Divi ». * ---------------------------------------------------------------------- */ @container (max-width: 640px) { .mcfr-cb__controls { flex-direction: column; align-items: stretch; } /* En colonne, `flex-basis` porte sur la hauteur : sans ce reset le champ devient un pavé de 220 px de haut. */ .mcfr-cb .mcfr-cb__seed, #et-boc .mcfr-cb .mcfr-cb__seed { flex: 0 0 auto; width: 100%; } .mcfr-cb__platforms { display: grid; grid-template-columns: 1fr 1fr; } .mcfr-cb .mcfr-cb__platform + .mcfr-cb__platform { margin-left: 0; } .mcfr-cb .mcfr-cb__update { grid-column: 1 / -1; margin-left: 0; width: 100%; } .mcfr-cb { --cb-ratio: 1 / 1; } } /* Repli media queries pour les navigateurs sans container queries. */ @media (max-width: 600px) { .mcfr-cb__controls { flex-direction: column; align-items: stretch; } .mcfr-cb .mcfr-cb__seed, #et-boc .mcfr-cb .mcfr-cb__seed { flex: 0 0 auto; width: 100%; } .mcfr-cb__platforms { display: grid; grid-template-columns: 1fr 1fr; } .mcfr-cb .mcfr-cb__platform + .mcfr-cb__platform { margin-left: 0; } .mcfr-cb .mcfr-cb__update { grid-column: 1 / -1; margin-left: 0; width: 100%; } .mcfr-cb { /* En portrait, un 16/10 écrase la carte au point de la rendre inutilisable. */ --cb-ratio: 1 / 1; --cb-pad: 12px; /* L'ombre portée du bloc ne doit pas créer de scroll horizontal. */ margin-right: 4px; } } @media (max-width: 560px) { .mcfr-cb__label { font-size: 14px; } /* Réduire la police plutôt que tronquer les libellés. */ .mcfr-cb .mcfr-cb__btn { padding: 7px 8px; font-size: 11px; } } /* ------------------------------------------------------------------------- * 7. Préférences utilisateur * ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .mcfr-cb .mcfr-cb__btn, #et-boc .mcfr-cb .mcfr-cb__btn { transition: none; } .mcfr-cb .mcfr-cb__btn:hover, .mcfr-cb .mcfr-cb__btn:active, #et-boc .mcfr-cb .mcfr-cb__btn:hover, #et-boc .mcfr-cb .mcfr-cb__btn:active { transform: none; } .mcfr-cb__blocks i { animation: none; opacity: 1; } } /* ------------------------------------------------------------------------- * 8. Parade Divi de dernier recours — NE PAS décommenter sans avoir vérifié * que la montée en spécificité ci-dessus ne suffit plus (une mise à jour * Divi peut introduire des règles `!important`). Limité aux propriétés que * Divi écrase réellement, mesurées sur le site : fond, bordure, ombre, * rayon, police. * ---------------------------------------------------------------------- * * .mcfr-cb .mcfr-cb__btn { * border-radius: 0 !important; * background-image: none !important; * font-family: var(--cb-sans) !important; * } */