/**
 * Baromètre IA — styles du gabarit (v2).
 *
 * Toutes les règles sont scopées sous une classe .rbia- : aucun sélecteur
 * nu (a, button, h2…) ne doit apparaître ici, pour ne jamais affecter le
 * reste du thème (critère d'acceptation du brief). Police : Poppins,
 * déjà chargée par le thème referenceur.be — ce fichier ne recharge
 * aucune police, il se contente de la nommer dans font-family.
 */

.rbia-page,
.rbia-archive {
	--rbia-green: #80bc00;
	--rbia-black: #030303;
	--rbia-slate: #2c3338;
	--rbia-text-secondary: #4b5257;
	--rbia-bg-light: #f6f7f5;
	--rbia-bg-green-light: #f2f8e5;
	font-family: Poppins, system-ui, sans-serif;
	color: var(--rbia-black);
	font-weight: 300;
	overflow-x: hidden;
}

.rbia-h1,
.rbia-h2 { margin: 0; font-weight: 400; letter-spacing: -1px; }
.rbia-h1 { font-size: clamp(40px, 6vw, 76px); line-height: 1.08; letter-spacing: -1.5px; }
.rbia-h1-archive { font-size: clamp(36px, 5vw, 56px); letter-spacing: -1px; }
.rbia-h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.1; }
.rbia-h2-compact { font-size: 24px; line-height: 1.2; letter-spacing: normal; }
.rbia-h2-light { color: #ffffff; }
.rbia-h1 em,
.rbia-h2 em { font-weight: 300; font-style: italic; }
.rbia-h1 strong,
.rbia-h2 strong { font-weight: 500; }
.rbia-section-intro,
.rbia-section-body { margin: 0; font-size: 16px; line-height: 1.7; color: var(--rbia-slate); }
.rbia-section-intro { font-size: 15px; max-width: 460px; }
.rbia-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }

/* Barre de recherche "changer de métier ou de ville", voir
templates/parts/quick-switch.php + assets/barometre.js (initQuickSwitch). */
.rbia-quick-switch { position: relative; max-width: 560px; margin: 20px auto 0; padding: 0 24px; }
.rbia-quick-switch-inner { position: relative; display: flex; align-items: center; background: #ffffff; border: 1px solid rgba(3, 3, 3, 0.12); border-radius: 999px; box-shadow: 0 4px 16px rgba(3, 3, 3, 0.06); }
.rbia-quick-switch-label { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; color: var(--rbia-text-secondary); }
.rbia-quick-switch-label svg { width: 18px; height: 18px; }
.rbia-quick-switch-input { flex: 1; border: 0; background: transparent; padding: 12px 16px 12px 0; font-size: 15px; font-family: inherit; color: var(--rbia-black); min-width: 0; }
.rbia-quick-switch-input:focus { outline: none; }
.rbia-quick-switch-input::placeholder { color: var(--rbia-text-secondary); }
.rbia-quick-switch-results { position: absolute; top: calc(100% + 8px); left: 24px; right: 24px; z-index: 10; margin: 0; padding: 8px; list-style: none; background: #ffffff; border-radius: 16px; box-shadow: 0 12px 32px rgba(3, 3, 3, 0.16); max-height: 320px; overflow-y: auto; }
.rbia-quick-switch-results[hidden] { display: none; }
.rbia-quick-switch-result { display: block; padding: 10px 14px; border-radius: 10px; font-size: 14px; color: var(--rbia-black); text-decoration: none; }
.rbia-quick-switch-result:hover,
.rbia-quick-switch-result:focus-visible { background: var(--rbia-bg-green-light); outline: none; }

/* Bandeau "Édition archivée" (adresse permanente /barometre-ia/<series_id>/,
voir RBIA_Stable_Url) : fond teinté + bordure complète + coins arrondis,
jamais de bordure gauche decorative seule. */
.rbia-archived-notice { max-width: 1240px; margin: 0 auto; padding: 14px 24px; font-size: 14px; color: #3d5a00; background: var(--rbia-bg-green-light); border: 1px solid rgba(3, 3, 3, 0.08); border-radius: 12px; }
.rbia-archived-notice-link { margin-left: 8px; color: var(--rbia-black); font-weight: 500; text-decoration: none; }
.rbia-archived-notice-link:hover { color: var(--rbia-green); }

/* 1-2. Fil d'Ariane + en-tête */
/* hero-aurora-host + canvas[data-hero-aurora] : meme effet de fond
anime (WebGL, voile/aurore verte) que toutes les autres pages du site,
fourni par le theme (assets/hero-aurora/hero-aurora.min.js, deja charge
globalement - rien a enqueue cote plugin). overflow:hidden en securite,
le theme l'a aussi sur son propre host. */
.rbia-hero { position: relative; overflow: hidden; padding: 72px 24px 64px; text-align: center; }
.rbia-hero-inner { position: relative; max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.rbia-breadcrumb { font-size: 13px; font-weight: 400; color: var(--rbia-text-secondary); }
.rbia-breadcrumb a { color: var(--rbia-text-secondary); text-decoration: none; }
.rbia-breadcrumb a:hover { color: var(--rbia-black); }
.rbia-breadcrumb-current { color: var(--rbia-black); }
.rbia-pill { margin: 0; display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.rbia-pill-edition { background: var(--rbia-bg-green-light); color: #3d5a00; }
.rbia-pill-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--rbia-green); display: inline-block; }
.rbia-pill-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--rbia-green); animation: rbia-pill-dot-pulse 1.8s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes rbia-pill-dot-pulse {
	0% { transform: scale(1); opacity: 0.6; }
	100% { transform: scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.rbia-pill-dot::after { animation: none; }
}
.rbia-hero-chapo { margin: 0; max-width: 680px; font-size: 18px; line-height: 1.6; color: var(--rbia-slate); }
.rbia-info-pills { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; font-size: 13px; }
.rbia-info-pill { padding: 8px 16px; border: 1px solid rgba(3, 3, 3, 0.12); border-radius: 999px; }

/* Questions posées aux IA (entre le podium et le classement complet) :
voir templates/parts/questions.php. */
.rbia-questions { max-width: 1240px; margin: 0 auto; padding: 0 24px 56px; }
.rbia-questions-list { margin: 20px 0 0; padding-left: 0; list-style: none; counter-reset: rbia-question; display: flex; flex-direction: column; gap: 10px; }
.rbia-questions-list li { counter-increment: rbia-question; position: relative; padding: 14px 20px 14px 52px; background: var(--rbia-bg-light); border-radius: 16px; font-size: 15px; line-height: 1.5; color: var(--rbia-slate); }
.rbia-questions-list li::before { content: counter(rbia-question); position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--rbia-bg-green-light); color: #3d5a00; font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: center; }

/* 3. Chiffres clés */
.rbia-key-figures { max-width: 1240px; margin: 0 auto; padding: 0 24px 80px; }
.rbia-key-figures-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.rbia-key-figure { background: var(--rbia-bg-light); border-radius: 28px; padding: 36px; display: flex; flex-direction: column; gap: 12px; }
.rbia-key-figure-primary { background: var(--rbia-black); color: #ffffff; }
.rbia-key-figure-value { margin: 0; font-size: 64px; line-height: 1; font-weight: 400; }
.rbia-key-figure-primary .rbia-key-figure-value { color: var(--rbia-green); }
.rbia-key-figure-label { margin: 0; font-size: 16px; line-height: 1.5; color: var(--rbia-slate); }
.rbia-key-figure-primary .rbia-key-figure-label { color: #e4e6e7; }

/* 4. Podium */
.rbia-podium { background: var(--rbia-bg-light); padding: 88px 24px; }
.rbia-podium-inner { max-width: 1240px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 40px; }
.rbia-podium-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; align-items: end; }
.rbia-podium-card {
	position: relative; background: #ffffff; border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 20px;
	box-shadow: 0 8px 32px rgba(3, 3, 3, 0.06); min-height: var(--rbia-podium-height, 260px);
}
.rbia-podium-top { display: flex; justify-content: center; }
.rbia-podium-badge { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 500; }
.rbia-podium-rank-1 .rbia-podium-badge { background: var(--rbia-green); color: var(--rbia-black); }
.rbia-podium-rank-2 .rbia-podium-badge { background: var(--rbia-black); color: #ffffff; }
.rbia-podium-rank-3 .rbia-podium-badge { background: var(--rbia-slate); color: #ffffff; }
/* Pastille en coin plutot qu'accolee au rond de rang : meme traitement
"pill" que dans le tableau de classement (.rbia-evo-pill), pour un badge
qui se lit comme une etiquette propre plutot que du texte colle au rond. */
.rbia-podium-evo {
	position: absolute; top: 24px; right: 24px;
	display: inline-flex; align-items: center; gap: 4px;
	padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 500;
}
.rbia-podium-evo.rbia-evo-up { background: #eaf5cc; color: #3d5a00; }
.rbia-podium-evo.rbia-evo-down { background: #fbe9e4; color: #9a2b14; }
.rbia-podium-evo.rbia-evo-same { background: #eef0ed; color: #4b5257; }
.rbia-podium-evo.rbia-evo-new { background: #e6eefa; color: #1f4e8c; }
.rbia-podium-name { margin: 0; font-size: 22px; font-weight: 500; }
.rbia-podium-score { display: flex; align-items: baseline; gap: 8px; }
.rbia-podium-score-value { font-size: 56px; line-height: 1; font-weight: 400; }
.rbia-podium-score-suffix { font-size: 16px; color: #5c6266; }
.rbia-podium-presence { margin: 0; font-size: 14px; color: var(--rbia-slate); }

/* Barres de progression (podium + tableau) */
.rbia-progress { height: 8px; border-radius: 99px; background: #eceee9; overflow: hidden; }
.rbia-progress span { display: block; height: 100%; background: var(--rbia-slate); border-radius: 99px; }
.rbia-progress-small { height: 6px; width: 120px; display: inline-block; vertical-align: middle; }
.rbia-podium-card .rbia-progress span,
.rbia-row-top3 .rbia-progress span { background: var(--rbia-green); }

/* Score bar du shortcode [barometre_ia] (rendu compact) */
.rbia-bar {
	display: inline-block; vertical-align: middle; width: 120px; height: 6px;
	margin-right: 10px; border-radius: 99px; background: #eceee9; overflow: hidden;
	position: relative;
}
.rbia-bar::after {
	content: ""; position: absolute; inset: 0; width: var(--rbia-score, 0%);
	background: var(--rbia-green); border-radius: 99px;
}

/* Pastilles d'évolution (podium + tableau) */
.rbia-evo-up { color: #3d5a00; }
.rbia-evo-down { color: #9a2b14; }
.rbia-evo-same { color: #4b5257; }
.rbia-evo-new { color: #1f4e8c; }
.rbia-evo-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.rbia-evo-pill.rbia-evo-up { background: #eaf5cc; color: #3d5a00; }
.rbia-evo-pill.rbia-evo-down { background: #fbe9e4; color: #9a2b14; }
.rbia-evo-pill.rbia-evo-same { background: #eef0ed; color: #4b5257; }
.rbia-evo-pill.rbia-evo-new { background: #e6eefa; color: #1f4e8c; }
/* Onglet par IA : fond neutre, mais la couleur du texte reste celle de
   l'évolution réelle de la ligne (rbia-evo-up/down/new/same ci-dessus). */
.rbia-evo-pill.rbia-evo-same-bg { background: #eef0ed; }

/* 5. Classement complet */
.rbia-ranking,
.rbia-example,
.rbia-cta,
.rbia-method,
.rbia-more,
.rbia-history { max-width: 1240px; margin: 0 auto; padding: 0 24px 80px; }
.rbia-ranking { padding-top: 96px; display: flex; flex-direction: column; gap: 32px; }
.rbia-cta { padding-top: 96px; padding-bottom: 96px; }
.rbia-tabs { display: flex; gap: 6px; padding: 6px; background: var(--rbia-bg-light); border-radius: 999px; flex-wrap: wrap; }
.rbia-tab {
	border: 0; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 400; padding: 12px 20px;
	min-height: 44px; border-radius: 999px; background: transparent; color: var(--rbia-black);
}
.rbia-tab-active { background: var(--rbia-green) !important; color: var(--rbia-black) !important; }
.rbia-table-wrap { overflow-x: auto; border: 1px solid #e8eae6; border-radius: 28px; }
.rbia-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.rbia-table thead tr { text-align: left; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rbia-text-secondary); background: #fafbf9; }
.rbia-table th { padding: 18px 12px; font-weight: 500; }
.rbia-table th:first-child,
.rbia-table td:first-child { padding-left: 24px; padding-right: 24px; }
.rbia-table th:last-child,
.rbia-table td:last-child { padding-right: 24px; }
.rbia-table td { padding: 18px 12px; border-top: 1px solid #eceee9; vertical-align: middle; }
.rbia-row-top3 td { background: #fbfdf7; }
.rbia-row-top3 .rbia-rank { font-weight: 600; }
.rbia-rank { font-size: 18px; font-weight: 400; }
.rbia-table [data-rbia-score-value] { font-weight: 500; }
.rbia-name { font-weight: 400; }
.rbia-client { color: #4a6d00; cursor: help; }
.rbia-score-cell { display: flex; align-items: center; gap: 12px; }
.rbia-ai-cells { display: flex; gap: 6px; flex-wrap: wrap; }
.rbia-ai-cell { min-width: 40px; text-align: center; padding: 4px 6px; border-radius: 8px; font-size: 12px; font-weight: 500; background: #f2f3f0; color: var(--rbia-slate); }
.rbia-ai-cell-active { background: var(--rbia-black); color: #ffffff; }
.rbia-legend { margin: 16px 0 0; font-size: 13px; color: var(--rbia-text-secondary); }

/* 6. Exemple de réponse IA */
.rbia-example-inner { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.rbia-example-text { flex: 1 1 380px; display: flex; flex-direction: column; gap: 20px; }
.rbia-chat { flex: 1 1 520px; margin: 0; background: var(--rbia-slate); border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 18px; color: #ffffff; }
.rbia-chat-question { align-self: flex-end; max-width: 80%; background: #3e474d; padding: 14px 20px; border-radius: 20px 20px 4px 20px; font-size: 15px; }
.rbia-chat-answer { max-width: 92%; background: #ffffff; color: var(--rbia-black); padding: 20px 22px; border-radius: 20px 20px 20px 4px; font-size: 15px; line-height: 1.65; }
.rbia-highlight { font-weight: 600; background: #eaf5cc; padding: 0 4px; border-radius: 4px; }
.rbia-chat-caption { margin: 0; font-size: 12px; font-weight: 400; color: #c9ced1; }

/* 7. Pourquoi certaines sont citées */
.rbia-reasons { background: var(--rbia-black); color: #ffffff; padding: 96px 24px; }
.rbia-reasons-inner { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 48px; }
.rbia-reasons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.rbia-reason-card { border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.rbia-reason-number { font-size: 14px; font-weight: 500; color: var(--rbia-green); }
/* !important : une regle h3 du theme referenceur.be gagne sinon en
specificite et rend ce titre noir sur le fond noir de cette section
(constate en prod le 2026-11-11, confirme par Antoine via devtools). */
.rbia-reason-title { margin: 0; font-size: 20px; font-weight: 500; color: #ffffff !important; }
.rbia-reason-text { margin: 0; font-size: 15px; line-height: 1.6; color: #c9ced1; }
.rbia-em-accent { color: var(--rbia-green); }

/* 8. Appel à l'action */
.rbia-cta-box { background: var(--rbia-bg-green-light); border-radius: 36px; padding: clamp(32px, 5vw, 64px); display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.rbia-cta-text { flex: 1 1 380px; display: flex; flex-direction: column; gap: 16px; }
.rbia-cta-form { flex: 1 1 420px; }
.rbia-cta-secondary-link { margin: 0; font-size: 14px; }
.rbia-cta-secondary-link a { color: var(--rbia-black); text-decoration: underline; }
.rbia-form,
.rbia-form-sent { display: flex; flex-direction: column; gap: 14px; }
.rbia-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; }
.rbia-field input { font-family: inherit; font-size: 15px; padding: 14px 20px; border: 1px solid #d5dccb; border-radius: 999px; background: #ffffff; }
.rbia-form-submit { margin-top: 6px; border: 0; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 400; padding: 16px 34px; min-height: 52px; border-radius: 999px; background: var(--rbia-black); color: #ffffff; }
.rbia-form-submit:hover,
.rbia-form-submit:focus { opacity: 0.88; }
.rbia-form-sent { margin: 0; padding: 24px; background: #ffffff; border-radius: 20px; font-size: 16px; font-weight: 400; }
.rbia-hp-wrap { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; margin: 0; }

/* 9. Méthode */
.rbia-method-details { border-top: 1px solid #e8eae6; border-bottom: 1px solid #e8eae6; padding: 28px 0; }
.rbia-method-details summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; list-style: none; }
.rbia-method-details summary::-webkit-details-marker { display: none; }
.rbia-method-toggle { font-size: 28px; font-weight: 300; line-height: 1; }
.rbia-method-details[open] .rbia-method-toggle { transform: rotate(45deg); display: inline-block; }
.rbia-method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; padding-top: 24px; font-size: 15px; line-height: 1.7; color: var(--rbia-slate); }
.rbia-method-grid p { margin: 0; }

/* 9b. Éditions précédentes */
.rbia-history { display: flex; flex-direction: column; gap: 32px; }
.rbia-history-row-degraded td { color: var(--rbia-text-secondary); font-style: italic; }
.rbia-history-csv { align-self: flex-start; text-decoration: none; padding: 14px 24px; min-height: 44px; display: inline-flex; align-items: center; border: 1px solid #e0e3dc; border-radius: 999px; font-size: 15px; color: var(--rbia-black); }
.rbia-history-csv:hover { border-color: var(--rbia-green); }

/* 10. Autres baromètres */
.rbia-more { display: flex; flex-direction: column; gap: 24px; }
.rbia-more-pills { display: flex; flex-wrap: wrap; gap: 12px; }
.rbia-more-pill { text-decoration: none; padding: 14px 24px; min-height: 44px; display: inline-flex; align-items: center; border: 1px solid #e0e3dc; border-radius: 999px; font-size: 15px; color: var(--rbia-black); }
.rbia-more-pill:hover { border-color: var(--rbia-green); }

/* Mode anonymisé */
.rbia-anonymized { max-width: 1240px; margin: 0 auto; padding: 0 24px 80px; }
.rbia-anonymized-inner { background: var(--rbia-bg-light); border-radius: 28px; padding: 32px; }
.rbia-anonymized-notice { margin: 0; font-size: 15px; color: var(--rbia-slate); }

/* Message manquant (données non disponibles) */
.rbia-missing-data { max-width: 1240px; margin: 0 auto; padding: 96px 24px; font-size: 16px; color: var(--rbia-slate); text-align: center; }

/* Archive /barometre-ia/ */
/* Meme effet "voile/aurore" que le hero des pages d'edition (voir
.rbia-hero) : canvas[data-hero-aurora] + classe hero-aurora-host,
rien a enqueue, deja charge globalement par le theme. */
.rbia-archive-header {
	position: relative; overflow: hidden;
	max-width: none; width: 100%; padding: 64px 24px 24px;
	text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center;
}
.rbia-archive-header-inner { position: relative; max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.rbia-archive-filters { max-width: 1240px; margin: 0 auto; padding: 0 24px 40px; display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.rbia-archive-filters select { font-family: inherit; font-size: 15px; padding: 12px 40px 12px 18px; min-height: 44px; border: 1px solid #d5dccb; border-radius: 999px; background: #ffffff; }
.rbia-archive-filter-submit { border: 0; cursor: pointer; font-family: inherit; font-size: 15px; padding: 12px 24px; min-height: 44px; border-radius: 999px; background: var(--rbia-black); color: #ffffff; }
.rbia-archive-grid { max-width: 1240px; margin: 0 auto; padding: 0 24px 96px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.rbia-archive-card {
	position: relative; display: flex; flex-direction: column; height: 100%;
	text-decoration: none; color: var(--rbia-black); background: var(--rbia-bg-light);
	border: 1px solid transparent; border-radius: 28px; padding: 28px 52px 28px 28px;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.rbia-archive-card:hover,
.rbia-archive-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px rgba(3, 3, 3, 0.08);
	border-color: #d5dccb;
}
.rbia-archive-card::after {
	content: ''; position: absolute; right: 24px; top: 50%; translate: 0 -50%;
	width: 28px; height: 28px; border-radius: 50%; background: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23030303' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 14px;
	transition: background-color 0.18s ease;
}
.rbia-archive-card:hover::after,
.rbia-archive-card:focus-visible::after { background-color: var(--rbia-green); }
.rbia-archive-card-meta { font-size: 13px; color: var(--rbia-text-secondary); }
/* !important : meme cascade du theme que .rbia-reason-title (voir plus
haut) - sans ca le titre heritait du style cursif/italique utilise par
le theme sur ses propres h1/h2. */
.rbia-archive-card-title { margin: 8px 0; font-size: 20px; font-weight: 700 !important; font-style: normal !important; }
.rbia-archive-card-summary { flex: 1; margin: 0; font-size: 14px; color: var(--rbia-slate); }
.rbia-archive-card-badge { display: inline-block; align-self: flex-start; margin-top: 12px; padding: 4px 12px; border-radius: 999px; background: #e6eefa; color: #1f4e8c; font-size: 12px; }
.rbia-archive-empty { max-width: 1240px; margin: 0 auto; padding: 0 24px 96px; font-size: 15px; color: var(--rbia-slate); }

/* Shortcode [barometre_ia] (rendu compact, hors gabarit de page) */
.rbia-compact { margin: 1.5em 0; }
.rbia-compact .rbia-meta { font-size: 0.9em; color: var(--rbia-text-secondary); }
.rbia-compact .rbia-disclosure { font-size: 0.85em; color: var(--rbia-text-secondary); }
.rbia-anonymized-notice.rbia-compact { margin: 1.5em 0; }

/* Champ masqué visuellement mais gardé accessible (lecteurs d'écran). */
.rbia-visually-hidden {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Listes déroulantes (tous les formulaires du plugin) : chevron SVG à
22px du bord droit, padding-right de 52px pour qu'il ne touche jamais la
bordure arrondie (brief, page mère). */
.rbia-field select {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	font-family: inherit; font-size: 15px; width: 100%;
	padding: 14px 52px 14px 20px; min-height: 48px;
	border: 1px solid #d5dccb; border-radius: 999px; background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23030303' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 22px center; background-size: 16px;
}

/* Page mère /barometre-ia/ (v2, proposition B) */
/* max-width/margin explicites : un style global du theme sur <header>
borne sinon cet element a 1440px centre, et l'effet aurore (canvas
dimensionne sur .rbia-mere-hero, voir plus haut) s'arrete net au lieu de
couvrir toute la largeur - constate en prod le 2026-11-12, invisible sur
.rbia-hero qui est un <section>, jamais touche par cette regle du theme. */
.rbia-mere-hero { position: relative; overflow: hidden; padding: 72px 24px 48px; text-align: left; max-width: none !important; margin: 0 !important; }
.rbia-mere-hero-inner { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 16px; }
.rbia-mere-hero-chapo { margin: 0; max-width: 680px; font-size: 18px; line-height: 1.6; color: var(--rbia-slate); }

.rbia-mere-doors { max-width: 1240px; margin: 0 auto; padding: 0 24px 80px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.rbia-mere-door {
	border-radius: 32px; padding: 40px; display: flex; flex-direction: column; gap: 16px;
	text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.rbia-mere-door:hover,
.rbia-mere-door:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(3, 3, 3, 0.08); }
.rbia-mere-door--search { background: var(--rbia-bg-green-light); color: var(--rbia-black); }
.rbia-mere-door--pro { background: var(--rbia-black); color: #ffffff; }
.rbia-mere-door-icon { width: 36px; height: 36px; color: var(--rbia-green); }
.rbia-mere-door-title { margin: 0; font-size: 26px; font-weight: 400; }
.rbia-mere-door-title em { font-style: italic; font-weight: 300; }
/* !important : meme cascade du theme que .rbia-reason-title et
.rbia-archive-card-title (voir plus bas) - sans ca "Je suis" restait noir
sur noir (texte en clair visible nulle part ailleurs dans la carte,
constate en prod le 2026-11-12). Meme famille de bug que le hero
(voir .rbia-mere-hero plus haut). */
.rbia-mere-door--pro .rbia-mere-door-title { color: #ffffff !important; }
.rbia-mere-door--pro .rbia-mere-door-title em { color: var(--rbia-green); }
.rbia-mere-door-text { margin: 0; font-size: 15px; line-height: 1.6; }
.rbia-mere-door--search .rbia-mere-door-text { color: var(--rbia-slate); }
.rbia-mere-door--pro .rbia-mere-door-text { color: #c9ced1; }
.rbia-mere-door-link { font-size: 15px; font-weight: 500; }
.rbia-mere-door--pro .rbia-mere-door-link { color: #ffffff; }

.rbia-mere-families { background: var(--rbia-bg-light); padding: 88px 24px; }
.rbia-mere-families-inner { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.rbia-mere-city-tabs { display: inline-flex; gap: 4px; padding: 4px; background: #ffffff; border-radius: 999px; flex-wrap: wrap; box-shadow: 0 1px 2px rgba(3, 3, 3, 0.06); }
.rbia-mere-city-tab {
	border: 0; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 400; padding: 10px 20px;
	min-height: 44px; border-radius: 999px; background: transparent; color: var(--rbia-black);
}
.rbia-mere-city-tab-active,
.rbia-mere-city-tab[aria-selected="true"] { background: var(--rbia-black) !important; color: #ffffff !important; }
/* align-items: start - sinon la grille etire chaque carte a la hauteur
   de la plus grande de sa ligne (comportement par defaut de CSS Grid),
   masquant le fait qu'une famille avec peu de secteurs a vraiment moins
   de contenu qu'une famille avec beaucoup de secteurs. */
.rbia-mere-families-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.rbia-mere-family-card { background: #ffffff; border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.rbia-mere-family-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rbia-mere-family-name { margin: 0; font-size: 20px; font-weight: 500; }
.rbia-mere-family-count { font-size: 13px; color: var(--rbia-text-secondary); white-space: nowrap; }
.rbia-mere-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.rbia-mere-pill { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; min-height: 44px; border-radius: 999px; font-size: 14px; text-decoration: none; }
.rbia-mere-pill--published { background: var(--rbia-bg-green-light); color: #3d5a00; }
.rbia-mere-pill--published:hover { background: #e6f0cf; }
.rbia-mere-pill--soon { background: transparent; border: 1px dashed #d5dccb; color: var(--rbia-text-secondary); cursor: default; pointer-events: none; }

/* Menu "quelle ville ?" sur les pastilles multi-villes, voir
assets/barometre-mere.js (initPillCityMenus). Sans JavaScript, la
pastille reste un lien simple vers la 1re ville publiee - ce menu n'existe
que comme amelioration progressive. */
.rbia-mere-pill-wrap { position: relative; display: inline-flex; }
.rbia-mere-pill--multi::after { content: ''; width: 7px; height: 7px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: 0.6; }
.rbia-mere-pill-cities { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; min-width: 180px; max-width: min(260px, calc(100vw - 48px)); flex-direction: column; gap: 2px; padding: 8px; background: #ffffff; border-radius: 14px; box-shadow: 0 12px 32px rgba(3, 3, 3, 0.16); }
.rbia-mere-pill-cities.rbia-mere-pill-cities-open { display: flex; }
.rbia-mere-pill-city-link { padding: 10px 14px; min-height: 40px; display: flex; align-items: center; border-radius: 8px; font-size: 14px; color: var(--rbia-black); text-decoration: none; }
.rbia-mere-pill-city-link:hover { background: var(--rbia-bg-green-light); }

/* Familles sans aucun métier publié nulle part : jamais une carte vide,
   juste cette ligne compacte sous la grille (ou seule, si rien n'est
   encore publié du tout) - voir templates/parts/mere-families.php. */
.rbia-mere-families-coming { margin: 0; padding: 18px 24px; border: 1px dashed #d5dccb; border-radius: 20px; font-size: 14px; line-height: 1.6; color: var(--rbia-text-secondary); }
.rbia-mere-families-coming-label { font-weight: 500; color: var(--rbia-black); margin-right: 6px; }

/* Progression du Baromètre (mois publiés), en bas de la page mère -
   voir templates/parts/mere-periods.php. */
.rbia-mere-periods { padding: 64px 24px 96px; }
.rbia-mere-periods-inner { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.rbia-mere-periods-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 12px; }
.rbia-mere-period-item { display: inline-flex; align-items: baseline; gap: 8px; padding: 12px 18px; border-radius: 999px; background: var(--rbia-bg-light); font-size: 14px; }
.rbia-mere-period-label { font-weight: 500; }
.rbia-mere-period-count { color: var(--rbia-text-secondary); }

.rbia-mere-form { max-width: 1240px; margin: 0 auto; padding: 96px 24px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.rbia-mere-form-text { flex: 1 1 380px; display: flex; flex-direction: column; gap: 16px; }
.rbia-mere-form-card { flex: 1 1 420px; background: var(--rbia-bg-green-light); border-radius: 36px; padding: clamp(28px, 4vw, 40px); display: flex; flex-direction: column; gap: 16px; }
.rbia-mere-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }

.rbia-mere-subscribe { background: var(--rbia-black); color: #ffffff; padding: 96px 24px; }
.rbia-mere-subscribe-inner { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 48px; }
.rbia-mere-subscribe-text { flex: 1 1 320px; display: flex; flex-direction: column; gap: 16px; }
.rbia-mere-subscribe-text p { margin: 0; font-size: 15px; line-height: 1.6; color: #c9ced1; }
.rbia-mere-subscribe-form { flex: 2 1 480px; display: flex; flex-direction: column; gap: 20px; }
.rbia-mere-subscribe-fields { display: flex; flex-direction: column; gap: 20px; }
.rbia-mere-choice-group-label { margin: 0 0 10px; font-size: 13px; font-weight: 500; color: #c9ced1; text-transform: uppercase; letter-spacing: 0.06em; }
.rbia-mere-choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.rbia-mere-choice-label { display: inline-flex; cursor: pointer; }
.rbia-mere-choice-input {
	position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; margin: -1px; padding: 0; border: 0;
}
.rbia-mere-choice {
	display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; min-height: 44px;
	border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28); color: #ffffff; font-size: 14px; user-select: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rbia-mere-choice::before { content: "+"; font-weight: 500; }
.rbia-mere-choice-input:checked + .rbia-mere-choice { background: var(--rbia-green); border-color: var(--rbia-green); color: var(--rbia-black); }
.rbia-mere-choice-input:checked + .rbia-mere-choice::before { content: "✓"; }
.rbia-mere-choice-input:focus-visible + .rbia-mere-choice { outline: 2px solid #ffffff; outline-offset: 2px; }
.rbia-mere-subscribe-email-row {
	display: flex; background: #15181a; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; overflow: hidden;
}
.rbia-mere-subscribe-email-row input[type="email"] {
	flex: 1; min-width: 0; border: 0; background: transparent; color: #ffffff; font-family: inherit; font-size: 15px; padding: 16px 22px; min-height: 52px;
}
.rbia-mere-subscribe-email-row input[type="email"]::placeholder { color: #8a9094; }
.rbia-mere-subscribe-submit {
	border: 0; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 500; padding: 16px 28px;
	min-height: 52px; border-radius: 999px; background: var(--rbia-green); color: var(--rbia-black); white-space: nowrap;
}
.rbia-mere-subscribe-submit:hover:not(:disabled),
.rbia-mere-subscribe-submit:focus:not(:disabled) { opacity: 0.88; }
.rbia-mere-subscribe-submit:disabled { background: #3a3d33; color: #7c8a5a; cursor: not-allowed; }
.rbia-mere-subscribe-help { margin: 0; font-size: 13px; color: #8a9094; }

/* Mobile : touche déjà les grilles (auto-fit), le tableau (défilement
   horizontal) et les onglets (flex-wrap) ; on resserre seulement les
   grands espacements verticaux pour éviter un défilement excessif. */
@media (max-width: 680px) {
	.rbia-podium,
	.rbia-reasons,
	.rbia-cta,
	.rbia-ranking,
	.rbia-archive-grid { padding-top: 56px; padding-bottom: 56px; }
	.rbia-hero { padding: 48px 20px 40px; }
	.rbia-cta-box,
	.rbia-reasons-inner,
	.rbia-podium-inner { gap: 28px; }

	.rbia-mere-hero { padding: 48px 20px 32px; }
	.rbia-mere-families,
	.rbia-mere-form,
	.rbia-mere-press,
	.rbia-mere-subscribe,
	.rbia-mere-periods { padding-top: 56px; padding-bottom: 56px; }
	.rbia-mere-doors { padding-bottom: 56px; }
	.rbia-mere-key-figures { padding-bottom: 56px; }
}

/* Page mère /barometre-ia/ (v3) : pastilles édition dans l'en-tête */
.rbia-mere-edition-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.rbia-pill-edition-next { background: transparent; border: 1px solid rgba(3, 3, 3, 0.12); color: var(--rbia-slate); }

/* 3e porte d'entrée "Je suis journaliste" */
.rbia-mere-door--press { background: #ffffff; border: 1px solid #e0e3dc; color: var(--rbia-black); }
.rbia-mere-door--press .rbia-mere-door-text { color: var(--rbia-slate); }
.rbia-mere-door--press .rbia-mere-door-link { color: var(--rbia-black); }

/* Les chiffres du mois */
.rbia-mere-key-figures { max-width: 1240px; margin: 0 auto; padding: 0 24px 80px; display: flex; flex-direction: column; gap: 32px; }
.rbia-mere-key-figure { position: relative; }
.rbia-mere-key-figure-source { margin: 0; font-size: 13px; color: var(--rbia-text-secondary); }
.rbia-key-figure-primary .rbia-mere-key-figure-source { color: #c9ced1; }
.rbia-copy-btn {
	align-self: flex-start; border: 1px solid rgba(3, 3, 3, 0.16); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500;
	padding: 8px 18px; min-height: 36px; border-radius: 999px; background: transparent; color: var(--rbia-black);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rbia-key-figure-primary .rbia-copy-btn { border-color: rgba(255, 255, 255, 0.32); color: #ffffff; }
.rbia-copy-btn:hover,
.rbia-copy-btn:focus-visible { border-color: var(--rbia-green); background: var(--rbia-bg-green-light); color: var(--rbia-black); }
.rbia-key-figure-primary .rbia-copy-btn:hover,
.rbia-key-figure-primary .rbia-copy-btn:focus-visible { background: var(--rbia-green); border-color: var(--rbia-green); color: var(--rbia-black); }
.rbia-copy-btn-done { border-color: var(--rbia-green) !important; background: var(--rbia-bg-green-light) !important; color: #3d5a00 !important; }

/* Espace presse */
.rbia-mere-press { background: var(--rbia-bg-light); padding: 88px 24px; }
.rbia-mere-press-inner { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.rbia-mere-press-embargo-cta {
	align-self: flex-start; text-decoration: none; padding: 14px 24px; min-height: 44px; display: inline-flex; align-items: center;
	border-radius: 999px; background: var(--rbia-black); color: #ffffff; font-size: 15px;
}
.rbia-mere-press-embargo-cta:hover,
.rbia-mere-press-embargo-cta:focus-visible { opacity: 0.88; }
.rbia-mere-press-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.rbia-mere-press-card { background: #ffffff; border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.rbia-mere-press-card--contact { background: var(--rbia-black); color: #ffffff; }
.rbia-mere-press-card-title { margin: 0; font-size: 20px; font-weight: 500; }
/* !important : meme cascade du theme que .rbia-reason-title et
.rbia-mere-door--pro .rbia-mere-door-title (voir plus haut) - correctif
preventif, pas encore constate en prod sur cette carte precise. */
.rbia-mere-press-card--contact .rbia-mere-press-card-title { color: #ffffff !important; }
.rbia-mere-press-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.rbia-mere-press-download {
	text-decoration: none; padding: 12px 18px; min-height: 44px; display: flex; align-items: center;
	border: 1px solid #e0e3dc; border-radius: 999px; color: var(--rbia-black); font-size: 14px;
}
.rbia-mere-press-download:hover { border-color: var(--rbia-green); }
.rbia-mere-press-empty { margin: 0; font-size: 14px; color: var(--rbia-text-secondary); }
.rbia-mere-press-card--contact .rbia-mere-press-empty { color: #c9ced1; }
.rbia-mere-press-citation { margin: 0; font-size: 14px; line-height: 1.6; color: var(--rbia-slate); background: var(--rbia-bg-light); border-radius: 16px; padding: 16px 18px; }
.rbia-mere-press-embed { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; border-top: 1px solid #eceee9; }
.rbia-mere-press-embed-code {
	width: 100%; font-family: inherit; font-size: 13px; color: var(--rbia-slate); background: var(--rbia-bg-light);
	border: 1px solid #e0e3dc; border-radius: 16px; padding: 12px 16px; resize: vertical;
}
.rbia-mere-press-contact-name { margin: 0; font-size: 20px; font-weight: 500; }
.rbia-mere-press-contact-role { margin: 0; font-size: 14px; color: #c9ced1; }
.rbia-mere-press-contact-phone,
.rbia-mere-press-contact-email { display: inline-block; margin-top: 4px; text-decoration: none; font-size: 14px; }
.rbia-mere-press-contact-phone { padding: 10px 20px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--rbia-green); color: var(--rbia-black); }
.rbia-mere-press-contact-email { text-decoration: underline; color: #c9ced1; }

/* Abonnement : choix "Vous êtes" (profil) et champ Média conditionnel */
.rbia-mere-choice--profile::before { content: none; }
.rbia-mere-subscribe-media-field { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
/* L'attribut HTML "hidden" (posé/retiré par initProfileToggle()) doit rester
prioritaire sur le display:flex ci-dessus : sans cette regle, le champ Média
resterait visible en permanence malgre "hidden" (l'origine "author" d'une
regle CSS normale l'emporte toujours sur la feuille de style par defaut du
navigateur, quelle que soit la specificite) - constate en testant le bascule
de profil dans un harnais de rendu, corrige ici plutot que de retirer la
regle display:flex necessaire a l'etat visible. */
.rbia-mere-subscribe-media-field[hidden] { display: none; }
.rbia-mere-subscribe-embargo-note { margin: 0; font-size: 13px; color: #8a9094; }