/*
Theme Name: PromoPropFirm
Theme URI: https://www.promopropfirm.com
Author: Pilotage marketing WeGetFunded
Description: Le tableau de cotation. Thème de blocs mobile d'abord : seize prop firms notées sur les mêmes critères, le classement lisible d'un coup d'œil, le n°1 assumé. Source versionnée dans le dossier de pilotage (D-WGF-142).
Version: 1.0.1
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: promopropfirm
*/

/* ============================================================
   PROMOPROPFIRM · le tableau de cotation
   Fond noir bleuté, grille fine, chiffres en Space Mono.
   Les couleurs, polices et tailles viennent de theme.json.
   ============================================================ */
:root {
  --fond: var(--wp--preset--color--fond); --fond-2: var(--wp--preset--color--fond-2); --carte: var(--wp--preset--color--fond-3);
  --carte-2: #1b2430;
  --texte: var(--wp--preset--color--encre); --texte-2: var(--wp--preset--color--encre-2); --texte-3: var(--wp--preset--color--encre-3);
  --neon: var(--wp--preset--color--neon); --neon-2: var(--wp--preset--color--neon-2); --neon-pale: var(--wp--preset--color--neon-pale);
  --or: var(--wp--preset--color--ambre); --rouge: var(--wp--preset--color--rouge);
  --ligne: var(--wp--custom--ligne-2); --ligne-2: var(--wp--custom--ligne);
  --r: var(--wp--custom--rayon); --r-sm: var(--wp--custom--rayon-petit);
  --sans: var(--wp--preset--font-family--sans); --mono: var(--wp--preset--font-family--mono);
  --barre-h: var(--wp--custom--barre-h);
  --ppf-cookie-h: 0px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background-image: linear-gradient(rgba(233,237,243,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(233,237,243,.035) 1px, transparent 1px);
  background-size: 32px 32px; background-position: center top;
  padding-bottom: calc(var(--barre-h) + 12px + var(--ppf-cookie-h));
}
body.admin-bar .ppf-head { top: var(--wp-admin--admin-bar--height, 32px); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.ppf-eyebrow { font: 700 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--neon); }
.ppf-sous { color: var(--texte-2); max-width: 52ch; }
.ppf-h2-petit { font-size: 24px; }
:focus-visible { outline: 3px solid var(--neon); outline-offset: 2px; }

/* --- en-tête ------------------------------------------------ */
.ppf-head { position: sticky; top: 0; z-index: 50; background: rgba(7,9,13,.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--ligne); }
.ppf-head__ligne { min-height: 60px; align-items: center; gap: 12px; }
.ppf-logo { margin: 0; }
.ppf-logo a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--texte); }
.ppf-logo a::before { content: ""; width: 26px; height: 26px; border-radius: 6px; background: var(--neon); flex: none; position: relative;
  background-image: linear-gradient(45deg, transparent 45%, var(--fond) 45%, var(--fond) 55%, transparent 55%); }
.ppf-nav { margin-left: auto; }
.ppf-nav a { color: var(--texte-2); text-decoration: none; padding: 10px 0; }
.ppf-nav a:hover { color: var(--texte); }
.ppf-maj { display: none; font: 400 13px var(--mono); color: var(--texte-3); white-space: nowrap; }
.ppf-maj b { color: var(--neon); font-weight: 400; }
.wp-block-navigation__responsive-container-open { width: 44px; height: 44px; border: 1px solid var(--ligne-2); border-radius: 10px; display: grid; place-items: center; color: var(--texte); }
.wp-block-navigation__responsive-container-open svg { width: 22px; height: 22px; }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--fond); padding: 24px 16px; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 40px; }
.wp-block-navigation__responsive-container.is-menu-open a { font-size: 26px; font-weight: 800; color: var(--texte); padding: 10px 0; }
.wp-block-navigation__responsive-container-close { width: 44px; height: 44px; color: var(--texte); }

/* --- héros ---------------------------------------------------- */
.ppf-main { padding-bottom: 8px; }
.ppf-hero { padding: 30px 0 10px; position: relative; }
.ppf-hero::before { content: ""; position: absolute; inset: -60px -20px auto; height: 420px; background: radial-gradient(500px 260px at 30% 20%, rgba(56,224,140,.16), transparent 65%); pointer-events: none; }
.ppf-hero > * { position: relative; }
.ppf-hero h1 { max-width: 13ch; margin-top: 10px; }
.ppf-hero h1 em, .ppf-hero h1 strong { font-style: normal; color: var(--neon); font-weight: inherit; }
.ppf-hero__sous { margin-top: 14px; font-size: 17px; color: var(--texte-2); max-width: 46ch; }
.ppf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }
.ppf-stats .wp-block-group { background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--r-sm); padding: 12px 12px 10px; }
.ppf-stats strong { display: block; font: 700 24px/1 var(--mono); color: var(--texte); }
.ppf-stats span { display: block; font-size: 13px; color: var(--texte-3); margin-top: 6px; line-height: 1.3; }

/* --- le podium du n°1 ----------------------------------------- */
.ppf-podium { margin-top: 22px; border: 1px solid rgba(56,224,140,.45); background: linear-gradient(160deg, rgba(56,224,140,.12), rgba(56,224,140,.02) 50%, var(--carte)); border-radius: var(--r); padding: 18px; position: relative; overflow: hidden; box-shadow: 0 0 0 1px rgba(56,224,140,.08), 0 24px 60px rgba(0,0,0,.5); }
.ppf-podium::after { content: "01"; position: absolute; right: -6px; top: -22px; font: 700 120px/1 var(--mono); color: rgba(56,224,140,.07); letter-spacing: -.06em; pointer-events: none; }
.ppf-podium > * { position: relative; }
.ppf-badge { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fond); background: var(--neon); padding: 8px 10px; border-radius: 6px; }
.ppf-podium__tete { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.ppf-podium__logo { width: 46px; height: 46px; border-radius: 10px; background: #fff; color: #0a5e39; display: grid; place-items: center; font: 800 14px var(--sans); flex: none; object-fit: contain; }
.ppf-podium h2 { font-size: 26px; }
.ppf-note { display: flex; align-items: center; gap: 8px; font: 400 14px var(--mono); color: var(--texte-2); margin-top: 2px; flex-wrap: wrap; }
.ppf-note i { color: var(--or); font-style: normal; letter-spacing: 1px; }
.ppf-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.ppf-cell { background: rgba(7,9,13,.55); border: 1px solid var(--ligne); border-radius: var(--r-sm); padding: 12px; }
.ppf-cell small { display: block; font: 400 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); }
.ppf-cell b { display: block; font: 700 22px/1.1 var(--mono); margin-top: 6px; color: var(--texte); }
.ppf-cell b.ok { color: var(--neon); }
.ppf-cell--remise { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(56,224,140,.08); border-color: rgba(56,224,140,.3); }
.ppf-cell--remise b { font-size: 38px; letter-spacing: -.03em; color: var(--neon); }
.ppf-copier { font: 700 18px var(--mono); letter-spacing: .08em; background: var(--fond); border: 1px dashed var(--neon); color: var(--neon); padding: 10px 12px; border-radius: 6px; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; }
.ppf-copier::after { content: "⧉"; font-size: 14px; opacity: .7; }
.ppf-copier.est-copie { background: var(--neon); color: var(--fond); }
.ppf-cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; min-height: 54px; padding: 0 20px; border-radius: var(--r-sm); background: var(--neon); color: var(--fond); text-decoration: none; font-weight: 800; font-size: 16px; transition: transform .15s, box-shadow .15s; box-shadow: 0 8px 30px rgba(56,224,140,.25); }
.ppf-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 36px rgba(56,224,140,.35); color: var(--fond); }
.ppf-cta::after { content: "→"; }
.ppf-cta--sec { background: transparent; color: var(--neon); border: 1px solid var(--neon); box-shadow: none; }
.ppf-cta--sec:hover { color: var(--neon); box-shadow: none; }
.ppf-podium__src { margin-top: 12px; font: 400 13px var(--mono); color: var(--texte-3); }

/* --- le classement -------------------------------------------- */
.ppf-section { padding: 40px 0 8px; }
.ppf-section h2 { margin-top: 8px; }
.ppf-section .ppf-sous { margin-top: 6px; }
.ppf-classement { display: grid; gap: 8px; margin-top: 18px; }
.ppf-ligne { background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--r-sm); position: relative; transition: border-color .15s; }
.ppf-ligne:hover { border-color: var(--ligne-2); }
.ppf-ligne > summary { display: grid; grid-template-columns: 28px 40px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px; cursor: pointer; list-style: none; min-height: 72px; }
.ppf-ligne > summary::-webkit-details-marker { display: none; }
.ppf-ligne__n { font: 700 14px var(--mono); color: var(--texte-3); text-align: center; }
.ppf-ligne__logo { width: 40px; height: 40px; border-radius: 8px; background: var(--carte-2); display: grid; place-items: center; font: 800 12px var(--sans); color: var(--texte-2); object-fit: contain; }
.ppf-ligne__id { min-width: 0; }
.ppf-ligne__nom { display: block; font-weight: 700; font-size: 15px; }
.ppf-ligne__crit { display: flex; gap: 10px; margin-top: 4px; font: 400 12px var(--mono); color: var(--texte-3); flex-wrap: wrap; }
.ppf-ligne__crit i { font-style: normal; }
.ppf-ligne__crit i.ok { color: var(--neon); }
.ppf-ligne__crit i.no { color: var(--texte-3); text-decoration: line-through; }
.ppf-ligne__d { text-align: right; }
.ppf-ligne__d b { display: block; font: 700 20px/1 var(--mono); color: var(--texte); }
.ppf-ligne__d span { display: block; font: 400 12px var(--mono); letter-spacing: .06em; color: var(--texte-2); margin-top: 4px; }
.ppf-etoiles { font: 400 12px var(--mono); color: var(--or); letter-spacing: 1px; }
.ppf-ligne--top { border-color: rgba(56,224,140,.45); background: linear-gradient(90deg, rgba(56,224,140,.1), var(--carte) 60%); }
.ppf-ligne--top .ppf-ligne__n, .ppf-ligne--top .ppf-ligne__d b { color: var(--neon); }
.ppf-ligne[open] > summary { border-bottom: 1px solid var(--ligne); }
.ppf-fiche { padding: 14px 12px 16px; display: grid; gap: 14px; }
.ppf-fiche__texte { color: var(--texte-2); font-size: 15px; }
.ppf-fiche__texte p + p { margin-top: 10px; }
.ppf-fiche__criteres { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.ppf-fiche__criteres li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--ligne); }
.ppf-fiche__criteres li b { flex: none; font: 700 13px var(--mono); }
.ppf-fiche__criteres li.oui b { color: var(--neon); }
.ppf-fiche__criteres li.non b { color: var(--texte-3); }

/* --- méthode -------------------------------------------------- */
.ppf-methode { margin-top: 32px; display: grid; gap: 10px; }
.ppf-methode__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: m; }
.ppf-methode__liste li { counter-increment: m; background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--r-sm); padding: 16px 16px 16px 52px; position: relative; font-size: 14px; color: var(--texte-2); }
.ppf-methode__liste li::before { content: counter(m, decimal-leading-zero); position: absolute; left: 16px; top: 18px; font: 700 13px var(--mono); color: var(--neon); }
.ppf-methode__liste li strong { display: block; font-size: 16px; color: var(--texte); margin-bottom: 4px; }

/* --- articles ------------------------------------------------- */
.ppf-articles { margin-top: 18px; }
.ppf-articles .wp-block-post-template { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ppf-carte-article { padding: 14px; background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--r-sm); }
.ppf-carte-article h2, .ppf-carte-article h3 { font-size: 16px; line-height: 1.3; }
.ppf-carte-article h2 a, .ppf-carte-article h3 a { text-decoration: none; }
.ppf-carte-article__vis { border-radius: 8px; overflow: hidden; margin: 0 0 10px; }
.ppf-carte-article__meta { font: 400 12px var(--mono); color: var(--texte-3); margin-top: 6px; }
.ppf-carte-article .wp-block-post-excerpt { font-size: 14px; color: var(--texte-2); margin-top: 6px; }
.wp-block-query-pagination { margin-top: 24px; font-weight: 700; }

/* --- FAQ ------------------------------------------------------ */
.ppf-faq .wp-block-details { border-top: 1px solid var(--ligne); margin: 0; padding: 6px 0; }
.ppf-faq .wp-block-details:first-of-type { margin-top: 16px; }
.ppf-faq .wp-block-details:last-of-type { border-bottom: 1px solid var(--ligne); }
.ppf-faq summary { cursor: pointer; font-weight: 700; font-size: 15px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0; }
.ppf-faq summary::-webkit-details-marker { display: none; }
.ppf-faq summary::after { content: "+"; font: 400 20px/1 var(--mono); color: var(--neon); }
.ppf-faq details[open] summary::after { content: "-"; }
.ppf-faq details p { margin: 0 0 10px; color: var(--texte-2); font-size: 14px; }

/* --- articles et pages ---------------------------------------- */
.ppf-article__tete { padding-top: 28px; }
.ppf-article__tete h1 { margin-top: 10px; max-width: 20ch; }
.ppf-article__meta { margin-top: 14px; font: 400 13px var(--mono); color: var(--texte-3); gap: 6px 14px; }
.ppf-article__image { margin-top: 22px; border-radius: var(--r); overflow: hidden; }
.ppf-article .wp-block-post-content { margin-top: 26px; font-size: 17px; color: var(--texte-2); }
.ppf-article .wp-block-post-content > * + * { margin-top: 1em; }
.ppf-article .wp-block-post-content h2, .ppf-article .wp-block-post-content h3 { color: var(--texte); margin-top: 1.5em; }
.ppf-article__verdict { margin-top: 40px; }
.ppf-article__verdict .ppf-podium { margin-top: 10px; }
.ppf-article__suite { margin-top: 40px; }
.ppf-liste__tete { padding-top: 28px; }
.ppf-liste__tete h1 { margin-top: 10px; }
.ppf-404 { padding-top: 40px; min-height: 50vh; }
.ppf-404 h1 { margin: 10px 0 12px; }
.wp-block-search__inside-wrapper { max-width: 420px; margin-top: 16px; }
.wp-block-search__input { border: 1px solid var(--ligne-2); border-radius: 8px; padding: 10px 12px; background: var(--carte); color: var(--texte); font: 16px var(--sans); }
.wp-block-search__button { border: 0; border-radius: 8px; background: var(--neon); color: var(--fond); font: 800 15px var(--sans); padding: 0 16px; min-height: 44px; margin-left: 8px; }

/* --- pied ----------------------------------------------------- */
.ppf-foot { margin-top: 44px; padding: 26px 0 20px; border-top: 1px solid var(--ligne); font-size: 14px; color: var(--texte-3); }
.ppf-foot__cols { display: grid; gap: 16px; }
.ppf-foot__aff { background: var(--carte); border: 1px solid var(--ligne); padding: 12px 14px; border-radius: var(--r-sm); line-height: 1.45; color: var(--texte-2); font-size: 14px; }
.ppf-foot__liens a, .ppf-foot__copie a { color: var(--texte-2); text-decoration: none; margin-right: 16px; display: inline-block; padding: 10px 0; line-height: 24px; }
.ppf-foot__copie { margin-top: 16px; }

/* --- barre d'action + bandeau cookies -------------------------- */
.ppf-barre { position: fixed; left: 0; right: 0; bottom: var(--ppf-cookie-h, 0px); z-index: 60; height: var(--barre-h); background: var(--carte-2); border-top: 1px solid rgba(56,224,140,.35); color: var(--texte); display: flex; align-items: center; gap: 12px; padding: 0 14px; transition: bottom .25s; }
.ppf-barre[hidden] { display: none; }
.ppf-barre__t { flex: 1; min-width: 0; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ppf-barre__t b { font-family: var(--mono); color: var(--neon); }
.ppf-barre a { flex: none; background: var(--neon); color: var(--fond); text-decoration: none; font-weight: 800; padding: 0 16px; min-height: 44px; display: flex; align-items: center; border-radius: 8px; font-size: 14px; }
.ppf-barre__fermer { flex: none; width: 44px; height: 44px; background: none; border: 0; color: var(--texte-3); font-size: 24px; cursor: pointer; }
/* le bandeau de Cookie Notice passe au-dessus de la barre : la conformité d'abord (F-WGF-258) */
#cookie-notice { z-index: 2147483001 !important; }
#cookie-notice .cookie-notice-container { padding: 10px 14px; font-size: 14px; line-height: 1.35; }
#cookie-notice #cn-notice-text { font-size: 14px; margin: 0 0 6px; }
#cookie-notice .cn-button { min-height: 40px; }
#cookie-notice .cn-close-icon { width: 44px; height: 44px; }
@media (max-width: 782px) { #cookie-notice { max-height: 34vh; overflow: auto; } #cookie-notice .cn-button { margin: 2px 4px 2px 0; } }

/* --- à partir de la tablette --------------------------------- */
@media (min-width: 640px) {
  .ppf-hero { padding-top: 44px; }
  .ppf-grille { grid-template-columns: repeat(4, 1fr); }
  .ppf-cell--remise { grid-column: 1 / -1; }
  .ppf-classement { grid-template-columns: 1fr 1fr; }
  .ppf-ligne--top, .ppf-ligne[open] { grid-column: 1 / -1; }
  .ppf-fiche { grid-template-columns: 1.4fr 1fr; padding: 16px 18px 20px; }
  .ppf-methode__liste { grid-template-columns: 1fr 1fr 1fr; }
  .ppf-articles .wp-block-post-template { grid-template-columns: 1fr 1fr 1fr; }
  .ppf-foot__cols { grid-template-columns: 2fr 1fr 1fr; }
}
/* --- ordinateur ----------------------------------------------- */
@media (min-width: 1000px) {
  .ppf-maj { display: block; }
  .ppf-hero { display: grid; grid-template-columns: 1fr 1.2fr; gap: 44px; align-items: center; padding: 56px 0 20px; }
  .ppf-podium { margin-top: 0; padding: 26px; }
  .ppf-classement { grid-template-columns: 1fr 1fr 1fr; }
  .ppf-barre { left: auto; right: 24px; bottom: calc(var(--ppf-cookie-h, 0px) + 24px); width: 420px; border-radius: 14px; height: auto; padding: 14px; border: 1px solid rgba(56,224,140,.35); }
}
@media (prefers-reduced-motion: no-preference) {
  .ppf-hero > * { animation: ppf-in .6s cubic-bezier(.2,.7,.2,1) both; }
  .ppf-hero > *:nth-child(2) { animation-delay: .08s; }
  @keyframes ppf-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ppf-barre { transition: none; } }

/* --- éditeur -------------------------------------------------- */
.editor-styles-wrapper .ppf-head { position: static; }
.editor-styles-wrapper .ppf-barre { position: static; margin-top: 20px; }