/* Pages publiques dans la charte du 24/09/2026 — maquette validée par btob le 09/10/2026.
   Fond : le calque .btb-fond (helpers/charte_fond.php, assets/css/charte-fond.css). Ici : textes posés sur le fond,
   cartes blanches, vidéo, listes par profil, tableau de la solution, chiffres, mot du fondateur.
   Écrit en clair, préfixe pp- : output.css est purgé, une classe Tailwind absente de la feuille compilée ne s'applique pas. */

.pp-page{max-width:1200px;margin:0 auto;padding:0 16px 64px;color:#1f2733;font-family:Inter,ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif}
.pp-page *,.pp-page *::before,.pp-page *::after{box-sizing:border-box}
.pp-page img{max-width:100%;display:block}
.pp-page h1,.pp-page h2,.pp-page h3{text-wrap:balance;margin:0}
.pp-fil{font-size:13px;color:rgba(255,255,255,.8);padding-top:24px;margin:0}
.pp-fil a{color:inherit;text-decoration:none}
.pp-fil a:hover{color:#fff}
.pp-eyebrow{display:inline-block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#8abf56}
.pp-eyebrow.pp-vf{color:#4f7d22}

/* Boutons */
.pp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;text-decoration:none;padding:12px 22px;border:0;cursor:pointer;font:inherit;font-weight:700;line-height:1.2}
.pp-btn-vert{background:#8abf56;color:#10131b}
.pp-btn-vert:hover{background:#9dcc6c;color:#10131b}
.pp-btn-blanc{background:#fff;color:#10131b}
.pp-btn-trait{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.pp-btn-trait:hover{background:rgba(255,255,255,.1);color:#fff}

/* Bandeau */
.pp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding:20px 0 36px;color:#fff}
.pp-hero h1{font-size:clamp(32px,5vw,50px);font-weight:900;line-height:1.08;margin-top:10px;letter-spacing:-.01em;color:#fff}
.pp-hero .pp-chapo{font-size:18px;color:rgba(255,255,255,.82);max-width:34em;margin:16px 0 22px;line-height:1.55}
.pp-actions{display:flex;flex-wrap:wrap;gap:12px}
.pp-hero-court{grid-template-columns:minmax(0,1fr);padding:16px 0 26px}
@media (max-width:900px){.pp-hero{grid-template-columns:minmax(0,1fr);gap:24px}}

/* Vidéo */
.pp-video{margin:0;border-radius:18px;overflow:hidden;background:#10131b;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.pp-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#10131b}
.pp-video figcaption{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 14px;font-size:13px;color:rgba(255,255,255,.8)}
.pp-video-titre{font-weight:700;color:#fff}

/* Onglets des profils (Comment ça marche) */
.pp-onglets{display:flex;gap:6px;flex-wrap:wrap;background:rgba(255,255,255,.08);padding:6px;border-radius:28px;width:max-content;max-width:100%}
.pp-onglets button{font:inherit;font-weight:700;font-size:15px;border:0;border-radius:999px;padding:10px 18px;background:transparent;color:#fff;cursor:pointer}
.pp-onglets button[aria-selected="true"]{background:#fff;color:#10131b}
.pp-onglets button:focus-visible{outline:3px solid #8abf56;outline-offset:2px}

/* Titres posés sur le fond */
.pp-titre-sec{color:#fff;margin:52px 0 18px;display:flex;flex-direction:column;gap:6px}
.pp-titre-sec h2{font-size:clamp(24px,3vw,32px);font-weight:800;color:#fff}
.pp-titre-sec p{color:rgba(255,255,255,.82);margin:0;max-width:46em}
.pp-titre-sec p a,.pp-sur-fond a{color:#d7efbf;font-weight:700}
.pp-famille{color:#fff;font-size:18px;font-weight:800;margin:26px 0 12px;display:flex;align-items:center;gap:10px}
.pp-famille::before{content:"";width:18px;height:3px;border-radius:2px;background:#8abf56}
.pp-sur-fond{color:rgba(255,255,255,.82);margin:18px 0 0}

/* Étapes */
.pp-etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pp-etape{background:#fff;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.pp-etape img{aspect-ratio:3/2;object-fit:cover;width:100%;height:auto}
.pp-etape-corps{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px}
.pp-etape-n{font-size:13px;font-weight:800;color:#4f7d22}
.pp-etape h3{font-size:19px;font-weight:800;color:#10131b}
.pp-etape p,.pp-etape div.pp-texte{margin:0;color:#566070;font-size:15px;line-height:1.55}
@media (max-width:860px){.pp-etapes{grid-template-columns:minmax(0,1fr)}}

/* Fonctions par profil */
.pp-fonctions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pp-fonctions.pp-n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pp-fct{background:#fff;border-radius:14px;overflow:hidden;text-decoration:none;display:grid;grid-template-columns:38% minmax(0,1fr);transition:transform .15s,box-shadow .15s;color:inherit}
.pp-fct:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.pp-fct img{width:100%;height:100%;object-fit:cover;min-height:130px}
.pp-fct-corps{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.pp-fct-titre{font-size:16px;font-weight:800;color:#10131b}
.pp-fct-texte{font-size:14px;color:#566070;line-height:1.45}
.pp-fct-lien{margin-top:auto;padding-top:6px;font-size:13.5px;font-weight:800;color:#4f7d22}
@media (max-width:1000px){.pp-fonctions,.pp-fonctions.pp-n2{grid-template-columns:minmax(0,1fr)}}

/* Encart légal du Jober */
.pp-legal{background:#fff8e6;border:1px solid #f0d58a;color:#4a3b10;border-radius:14px;padding:16px 18px;font-size:14.5px;margin-top:22px;line-height:1.55}
.pp-legal b{display:block;margin-bottom:4px;color:#3a2e08}

/* Mot du fondateur */
.pp-mot{margin-top:52px;display:grid;grid-template-columns:180px minmax(0,1fr);gap:26px;align-items:center;background:#fff;border-radius:20px;padding:24px}
.pp-mot img{width:180px;height:180px;object-fit:cover;border-radius:50%;border:5px solid #8abf56}
.pp-mot blockquote{margin:8px 0 10px;font-size:clamp(18px,2.2vw,22px);font-weight:600;color:#10131b;line-height:1.45}
.pp-sig{margin:0;color:#566070}
.pp-sig b{color:#10131b}
.pp-sig a{color:#4f7d22;font-weight:700;text-decoration:none}
@media (max-width:640px){.pp-mot{grid-template-columns:minmax(0,1fr);text-align:center}.pp-mot img{margin:0 auto;width:140px;height:140px}}

/* Tableau de la solution */
.pp-tab-wrap{overflow-x:auto;border-radius:16px;background:#fff}
.pp-matrice{width:100%;border-collapse:collapse;min-width:620px;font-size:14.5px}
.pp-matrice th,.pp-matrice td{padding:11px 14px;border-bottom:1px solid #e6e9ee;text-align:left}
.pp-matrice thead th{background:#f4f6f9;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#566070}
.pp-matrice tbody th{font-weight:600;color:#10131b}
.pp-matrice tbody th a{color:inherit;text-decoration:none}
.pp-matrice tbody th a:hover{text-decoration:underline}
.pp-matrice td.pp-oui{color:#4f7d22;font-weight:700}
.pp-matrice td.pp-non{color:#b8c0cc}
.pp-matrice tbody tr:last-child th,.pp-matrice tbody tr:last-child td{border-bottom:0}
@media (max-width:640px){
  .pp-matrice{min-width:0}.pp-matrice thead{display:none}
  .pp-matrice tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid #e6e9ee}
  .pp-matrice tbody th{grid-column:1/-1;border:0;padding-bottom:4px}
  .pp-matrice td{border:0;padding-top:2px;font-size:13px}
  .pp-matrice td::before{content:attr(data-l);display:block;font-size:11px;font-weight:600;color:#566070;text-transform:uppercase;letter-spacing:.04em}
}

/* Chiffres */
.pp-chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.14);border-radius:16px;overflow:hidden;margin-top:52px}
.pp-chiffres div{background:rgba(16,19,27,.55);padding:20px;color:#fff}
.pp-chiffres strong{display:block;font-size:30px;font-weight:900;font-variant-numeric:tabular-nums;color:#fff}
.pp-chiffres span{color:rgba(255,255,255,.8);font-size:14px}
@media (max-width:760px){.pp-chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Questions */
.pp-faq{display:grid;gap:10px}
.pp-faq details{background:#fff;border-radius:12px;padding:14px 18px}
.pp-faq summary{font-weight:700;color:#10131b;cursor:pointer}
.pp-faq p{margin:8px 0 0;color:#566070}
.pp-faq a{color:#4f7d22;font-weight:700}

/* Appel final */
.pp-cta{margin-top:52px;background:linear-gradient(120deg,#0c376b,#173f74);border-radius:20px;padding:30px;color:#fff;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.pp-cta h2{font-size:26px;font-weight:800;color:#fff}
.pp-cta p{margin:6px 0 0;color:rgba(255,255,255,.82)}

/* À propos */
.pp-histoire{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;background:#fff;border-radius:20px;padding:28px;align-items:start}
.pp-histoire figure{margin:0}
.pp-histoire figure img{border-radius:14px;aspect-ratio:4/5;object-fit:cover;width:100%;height:auto}
.pp-histoire figcaption{font-size:14px;color:#566070;margin-top:10px}
.pp-histoire figcaption b{color:#10131b;display:block}
.pp-histoire h2{font-size:28px;font-weight:800;color:#10131b;margin:6px 0 12px}
.pp-histoire p{margin:0 0 12px;max-width:64ch;line-height:1.65}
.pp-histoire blockquote{margin:14px 0 0;border-left:4px solid #8abf56;padding-left:14px;font-size:17px;font-style:italic;color:#10131b}
.pp-reperes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.pp-reperes div{border:1px solid #e6e9ee;border-radius:12px;padding:12px 14px}
.pp-reperes strong{display:block;font-size:20px;font-weight:900;color:#10131b}
.pp-reperes span{font-size:13px;color:#566070}
@media (max-width:860px){.pp-histoire{grid-template-columns:minmax(0,1fr)}.pp-histoire figure img{aspect-ratio:1/1;max-height:340px}}
@media (max-width:520px){.pp-reperes{grid-template-columns:minmax(0,1fr)}}
.pp-engag,.pp-trois{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pp-engag a,.pp-trois a{background:#fff;border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;display:block}
.pp-engag img{aspect-ratio:16/9;object-fit:cover;width:100%;height:auto}
.pp-trois img{aspect-ratio:3/2;object-fit:cover;width:100%;height:auto}
.pp-engag span.pp-c,.pp-trois span.pp-c{display:block;padding:16px 18px 20px}
.pp-engag b,.pp-trois b{display:block;font-size:17px;font-weight:800;color:#10131b}
.pp-engag em{display:block;font-style:normal;margin-top:6px;color:#566070;font-size:14.5px}
.pp-trois em{display:block;font-style:normal;color:#4f7d22;font-weight:700;font-size:14px;margin-top:4px}
@media (max-width:860px){.pp-engag,.pp-trois{grid-template-columns:minmax(0,1fr)}}
.pp-medias{display:flex;gap:10px;flex-wrap:wrap}
.pp-medias a,.pp-medias span{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:10px 16px;font-weight:700;text-decoration:none}

/* Cartes des pros et des articles (blocs automatiques de « À propos ») */
.pp-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.pp-carte{background:#fff;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;color:inherit;text-decoration:none}
.pp-carte-photo{height:170px;overflow:hidden;background:#e9edf2}
.pp-carte-photo img{width:100%;height:100%;object-fit:cover}
.pp-carte-corps{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.pp-carte-nom{font-weight:800;color:#10131b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-carte-meta{font-size:13px;color:#566070}
.pp-carte-texte{font-size:14px;color:#566070;line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.pp-carte-lien{margin-top:auto;padding-top:6px;font-size:13.5px;font-weight:800;color:#4f7d22}

/* Page introuvable */
.pp-introuvable{text-align:center;color:#fff;padding:50px 0 10px;display:flex;flex-direction:column;align-items:center;gap:12px}
.pp-introuvable .pp-code{font-size:clamp(80px,16vw,150px);font-weight:900;line-height:1;color:#8abf56}
.pp-introuvable h1{font-size:clamp(26px,4vw,38px);font-weight:900;color:#fff}
.pp-introuvable p{color:rgba(255,255,255,.82);margin:0}
.pp-introuvable .pp-actions{justify-content:center;margin-top:8px}
.pp-pistes{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pp-pistes a{display:block;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:9px 14px;text-decoration:none;font-weight:600;color:#fff}
.pp-pistes a:hover{background:rgba(255,255,255,.18)}

/* ── Pages de contenu dans la charte (09/10/2026, lot 2) : Contact, Presse, Blog, article, FAQ, Avis, Mentions
   légales, Cookies, Confidentialité, CGU, Prestations. Le <body> porte pp-charte : les bandeaux deviennent
   transparents sur le fond photo, chaque section de contenu de premier niveau devient une carte blanche.
   Aucun texte ni lien n'est touché : seule la présentation change. */
body.pp-charte{background:#1d2a45}
body.pp-charte section.bg-dark,body.pp-charte section.bg-gray-900,body.pp-charte section.bg-\[\#0C376B\],body.pp-charte #faq-hero{background:transparent!important}
body.pp-charte #faq-hero,body.pp-charte #faq-hero h1,body.pp-charte #faq-hero h2,body.pp-charte #faq-hero p,body.pp-charte #faq-hero a,body.pp-charte #faq-hero span{color:#fff!important}
body.pp-charte #faq-hero > .absolute.inset-0{display:none}
body.pp-charte #faq-hero span.pointer-events-none{color:rgba(255,255,255,.1)!important}
body.pp-charte main > section:not(.bg-\[\#0C376B\]):not(.bg-dark):not(.bg-gray-900),body.pp-charte > section.py-10,body.pp-charte main > div > section.py-16{background:#fff!important;max-width:1200px;margin:24px auto!important;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
@media (max-width:1232px){body.pp-charte main > section:not(.bg-\[\#0C376B\]):not(.bg-dark):not(.bg-gray-900),body.pp-charte > section.py-10,body.pp-charte main > div > section.py-16{margin:16px 12px!important}}
body.pp-charte main{padding-bottom:24px}
/* Page des avis : le bloc unifié (includes/avis-bloc.php) garde ses cartes sombres ; son titre passe en blanc sur le fond. */
body.pp-charte main.hp-avis{background:transparent!important}
body.pp-charte main.hp-avis h1,body.pp-charte main.hp-avis h2{color:#fff!important}
body.pp-charte main.hp-avis .hp-avis-excellent,body.pp-charte main.hp-avis .hp-avis-basee,body.pp-charte main.hp-avis .hp-avis-basee strong,body.pp-charte main.hp-avis .hp-avis-tplogo,body.pp-charte main.hp-avis .hp-avis-groupe-note{color:#fff!important}
body.pp-charte main.hp-avis .hp-avis-basee,body.pp-charte main.hp-avis .hp-avis-groupe-note{opacity:.85}
body.pp-charte #faq-hero li{color:rgba(255,255,255,.85)!important}
body.pp-charte section.bg-dark .text-primary,body.pp-charte section.bg-gray-900 .text-primary{color:#d7efbf!important}

/* ── Pages métiers et villes (09/10/2026, lot 3) : /professions, /professions/category/…, /professions/<métier>,
   /professions/<métier>/<ville>. Fond « artisans » ; le bloc principal entier devient la carte blanche (le contenu
   n'y est pas découpé en sections) ; les bandeaux colorés deviennent transparents sur le fond. */
body.pp-metiers .professions-index-hero,body.pp-metiers .category-hero,body.pp-metiers section.bg-gradient-to-r{background:transparent!important}
body.pp-charte.pp-metiers main,body.pp-metiers > div.bg-white.border-b,body.pp-metiers > section.max-w-7xl{background:#fff!important;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.25);margin:24px auto!important;max-width:1200px}
body.pp-metiers > div.bg-white.border-b{border:0!important}
body.pp-charte.pp-metiers main > section:not(.bg-\[\#0C376B\]):not(.bg-dark):not(.bg-gray-900){background:transparent!important;box-shadow:none;border-radius:0;max-width:none;margin:revert!important}
@media (max-width:1232px){body.pp-charte.pp-metiers main,body.pp-metiers > div.bg-white.border-b,body.pp-metiers > section.max-w-7xl{margin:16px 12px!important}}