/* ===== PrimeParrain — tokens & composants partagés (V3.5) ===== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Instrument+Sans:wght@400;500;600;700&family=Spline+Sans+Mono:wght@500;700&display=swap');

:root{
  --pp-orange:      rgba(248,158,3,1);
  --pp-orange-soft: rgba(248,158,3,.12);
  --pp-orange-line: rgba(248,158,3,.45);
  --pp-orange-deep: #B96F00;
  --pp-paper:       #FFFBF3;
  --pp-ink:         #141210;
  --pp-ink-soft:    rgba(20,18,16,.66);
  --pp-line:        rgba(20,18,16,.10);
  --pp-card:        #FFFFFF;
  --pp-green:       #1E7A4E;
  --pp-radius:      18px;
  --pp-font-display:"Bricolage Grotesque", system-ui, sans-serif;
  --pp-font-body:   "Instrument Sans", system-ui, sans-serif;
  --pp-font-mono:   "Spline Sans Mono", ui-monospace, monospace;
}

body{ background:var(--pp-paper); overflow-x:clip; }

.pp-wrap{ max-width:1120px; margin:0 auto; padding:0 20px; }
.pp-mono{ font-family:var(--pp-font-mono); font-weight:700; font-variant-numeric:tabular-nums; }

/* Ancres : compense la hauteur du header fixed (62px mobile / 66px desktop, voir Bloc H) + marge de confort */
#inscription{ scroll-margin-top:82px; }
@media (min-width:820px){ #inscription{ scroll-margin-top:86px; } }

/* --- Sections pleine largeur (blocs 2, 3, 4, 6, 8, 10) --- */
.pp-bleed{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* --- Boutons --- */
.pp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--pp-font-body); font-weight:700; font-size:1rem; line-height:1.2;
  background:var(--pp-orange); color:var(--pp-ink) !important; text-decoration:none;
  border:none; border-radius:14px; padding:15px 24px; cursor:pointer;
  box-shadow:0 5px 0 rgba(185,111,0,.5);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.pp-btn:hover{ transform:translateY(-2px); box-shadow:0 7px 0 rgba(185,111,0,.5); filter:brightness(1.03); }
.pp-btn:active{ transform:translateY(2px); box-shadow:0 2px 0 rgba(185,111,0,.5); }
.pp-btn--ghost{ background:transparent; box-shadow:none; border:2px solid var(--pp-ink); color:var(--pp-ink) !important; }
.pp-btn--ghost:hover{ background:var(--pp-ink); color:var(--pp-paper) !important; }

/* --- Focus clavier --- */
.pp-btn:focus-visible, .pp-wrap a:focus-visible,
.pp-input:focus-visible, .pp-submit:focus-visible,
.pp-faq summary:focus-visible{
  outline:3px solid var(--pp-orange); outline-offset:3px; border-radius:6px;
}

/* --- Bandeaux défilants (partenaires + avis) --- */
.pp-marquee{
  display:flex; gap:12px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.pp-marquee + .pp-marquee{ margin-top:12px; }
.pp-marquee__track{ display:flex; gap:12px; flex-shrink:0; align-items:center; animation:ppScroll 42s linear infinite; }
.pp-marquee--rev .pp-marquee__track{ animation-direction:reverse; }
.pp-marquee:hover .pp-marquee__track{ animation-play-state:paused; }
@keyframes ppScroll{ to{ transform:translateX(calc(-100% - 12px)); } }

/* --- Tuiles logo (héro) --- */
.pp-lg{
  width:32px; height:32px; border-radius:9px; flex:none; object-fit:contain;
  background:#fff; border:1px solid var(--pp-line); padding:3px;
}
.pp-lg-mono{
  width:32px; height:32px; border-radius:9px; flex:none;
  display:grid; place-items:center; color:#fff;
  font-family:var(--pp-font-display); font-weight:800; font-size:.74rem; letter-spacing:-.03em;
}

/* --- Apparition au scroll (fail-safe : visible si le JS ne tourne pas) --- */
.pp-reveal{ opacity:1; transform:none; }
.pp-js .pp-reveal{ opacity:0; transform:translateY(20px); transition:opacity .5s ease, transform .5s ease; }
.pp-js .pp-reveal.pp-shown{ opacity:1; transform:none; }

/* ===== FORMULAIRE NEWSLETTER — HTML natif + Formspree =====
   Structure : <form class="pp-form pp-form--inline"> > .pp-field > .pp-input + .pp-submit + .pp-ok + .pp-err
   Variantes : .pp-form--inline (côte à côte >=680px) · .pp-form--dark (sur fond orange)
   Réutilisable partout (articles, pages) : dupliquer le <form>, changer les id.
   !important nécessaire : Blocksy style les inputs avec une spécificité supérieure. */
.pp-form{ display:block; margin:0; }
.pp-field{ margin:0 0 10px; }

.pp-form .pp-input{
  width:100% !important; box-sizing:border-box !important;
  font:600 1rem var(--pp-font-body) !important;
  padding:15px 18px !important;
  border:2px solid var(--pp-ink) !important;
  border-radius:14px !important;
  background:var(--pp-card) !important;
  color:var(--pp-ink) !important;
  height:auto !important; min-height:0 !important;
  box-shadow:none !important;
  -webkit-appearance:none; appearance:none;
}
.pp-form .pp-input::placeholder{ color:rgba(20,18,16,.4) !important; opacity:1; }
.pp-form .pp-input:focus{
  outline:3px solid var(--pp-orange) !important; outline-offset:2px;
  border-color:var(--pp-ink) !important; background:var(--pp-card) !important;
}

.pp-form .pp-submit{
  display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
  width:100%; box-sizing:border-box;
  font-family:var(--pp-font-body) !important; font-weight:700 !important;
  font-size:1rem !important; line-height:1.2 !important;
  background:var(--pp-orange) !important; color:var(--pp-ink) !important;
  border:none !important; border-radius:14px !important;
  padding:15px 22px !important; cursor:pointer;
  box-shadow:0 5px 0 rgba(185,111,0,.5) !important;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.pp-form .pp-submit:hover{ transform:translateY(-2px); box-shadow:0 7px 0 rgba(185,111,0,.5) !important; filter:brightness(1.03); }
.pp-form .pp-submit:active{ transform:translateY(2px); box-shadow:0 2px 0 rgba(185,111,0,.5) !important; }
.pp-form .pp-submit:disabled{ opacity:.6; cursor:wait; transform:none; }

/* Message de confirmation (accepte HTML riche : liens, gras, sauts de ligne) */
.pp-ok{
  display:none; margin:0;
  background:var(--pp-orange-soft); border:1px solid var(--pp-orange-line);
  color:var(--pp-ink); border-radius:14px; padding:16px 20px;
  font-size:.93rem; line-height:1.6; font-weight:500;
  animation:ppFadeUp .45s ease both;
}
.pp-ok.pp-on{ display:block; }
.pp-ok strong{ color:var(--pp-ink); font-weight:700; }
.pp-ok a{ color:var(--pp-orange-deep); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.pp-ok a:hover{ color:var(--pp-ink); }
.pp-ok span{ text-decoration:underline; }

.pp-err{ display:none; margin:8px 0 0; color:#DC2626; font-size:.85rem; font-weight:600; }
.pp-err.pp-on{ display:block; }

/* Honeypot anti-spam : hors écran, jamais display:none (les bots le détectent) */
.pp-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Côte à côte : nowrap + base auto pour tenir dans les 470px du hero
   Seuil remonté à 680px (au lieu de 600) : entre 600 et 680px, le bouton "Recevoir les
   bons plans" en nowrap écrasait le champ email (largeur trop juste) → on reste empilé
   un peu plus longtemps, c'est toujours propre en empilé, jamais en écrasé. */
@media (min-width:680px){
  .pp-form--inline{ display:flex; gap:10px; align-items:stretch; flex-wrap:nowrap; }
  .pp-form--inline .pp-field{ flex:1 1 auto; min-width:0; margin:0; }
  .pp-form--inline .pp-submit{ width:auto; flex:0 0 auto; white-space:nowrap; }
  .pp-form--inline .pp-ok,
  .pp-form--inline .pp-err{ flex:1 1 100%; }
  /* le message de succès reprend toute la largeur une fois le champ masqué */
  .pp-form--inline:has(.pp-ok.pp-on){ flex-wrap:wrap; }
}

/* Largeur du formulaire du CTA final : on contraint le <form> LUI-MÊME, pas son wrapper.
   Raison : si le div .pp-final__capture est absent ou que sa règle est surchargée, le form
   en display:flex s'étale sur toute la largeur de la section et le champ email explose.
   En bornant le form, la largeur est garantie quel que soit l'état du wrapper. */
.pp-final .pp-form{
  max-width:640px !important;
  margin-left:auto !important; margin-right:auto !important;
}

.pp-form--dark .pp-submit{
  background:var(--pp-ink) !important; color:var(--pp-paper) !important;
  box-shadow:0 5px 0 rgba(20,18,16,.4) !important;
}
.pp-form--dark .pp-submit:hover{ box-shadow:0 7px 0 rgba(20,18,16,.4) !important; }
.pp-form--dark .pp-ok{ background:var(--pp-paper); border-color:var(--pp-ink); }

@keyframes ppFadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ===== Accessibilité : animations réduites ===== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .pp-wrap *, .pp-marquee *, .pp-nav *, .pp-footer *{ animation:none !important; transition:none !important; }
  .pp-reveal{ opacity:1 !important; transform:none !important; }
  .pp-marquee{ mask-image:none; -webkit-mask-image:none; }
  .pp-marquee, .pp-marquee__track{ flex-wrap:wrap; justify-content:center; }
  .pp-marquee__track[aria-hidden="true"]{ display:none; }
}

html{ scroll-behavior:smooth; }

/* --- Surligneur tracé à la main. Réutilisable partout :
   <span class="pp-mark"><span class="pp-mark__t">le mot</span><svg viewBox="0 0 160 14"
   preserveAspectRatio="none" aria-hidden="true"><path pathLength="1"
   d="M4 10 C 45 2, 115 2, 156 8"></path></svg></span>
   pathLength="1" normalise la longueur du tracé : le même CSS marche quelle que soit
   la largeur du trait, sans avoir à calculer sa longueur réelle. --- */
.pp-mark{ position:relative; white-space:nowrap; display:inline-block; }
.pp-mark__t{ position:relative; z-index:1; }
.pp-mark svg{ position:absolute; left:-1.5%; bottom:-.14em; width:103%; height:.28em; z-index:0; }
.pp-mark svg path{ stroke:var(--pp-orange); stroke-width:9; fill:none; stroke-linecap:round; }
.pp-js .pp-mark svg path{ stroke-dasharray:1; stroke-dashoffset:1; animation:ppDraw .75s ease-out .3s forwards; }
@keyframes ppDraw{ to{ stroke-dashoffset:0; } }

/* --- Micro-célébration à l'inscription --- */
.pp-ok{ position:relative; }
.pp-ok.pp-on{ animation:ppFadeUp .45s ease both, ppGlow 1.2s ease-out .25s 1; }
.pp-ok.pp-on::before{
  content:"🎉"; position:absolute; top:-15px; left:50%;
  font-size:1.5rem; transform:translateX(-50%); pointer-events:none;
  animation:ppParty .9s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ppGlow{
  0%{ box-shadow:0 0 0 0 rgba(248,158,3,.45); }
  100%{ box-shadow:0 0 0 18px rgba(248,158,3,0); }
}
@keyframes ppParty{
  0%{ opacity:0; scale:.3; translate:0 12px; }
  55%{ opacity:1; scale:1.15; translate:0 -7px; }
  100%{ opacity:1; scale:1; translate:0 0; }
}

/* --- Le chien du footer remue la queue au survol --- */
.pp-dog{ display:inline-block; transform-origin:60% 80%; }
.pp-footer__in span:hover .pp-dog{ animation:ppWag .45s ease-in-out 2; }
@keyframes ppWag{
  0%,100%{ transform:rotate(0); }
  25%{ transform:rotate(-15deg); }
  75%{ transform:rotate(15deg); }
}

@media (prefers-reduced-motion:reduce){
  .pp-js .pp-mark svg path{ stroke-dashoffset:0; animation:none; }
  .pp-ok.pp-on::before{ animation:none; }
  .pp-dog{ animation:none !important; }
}

/* ===================================================================
   CSS V1 — hérité, encore utilisé par d'autres pages (Fluent Forms actif
   ailleurs, pp-reviewwall, pp-wall, pp-hotdeal-mini, pp-btn-outline...).
   NE PAS SUPPRIMER avant migration complète de ces pages.
   =================================================================== */

/* Note de source sous le mur d'avis — discret mais lisible */
.pp-reviewwall-intro{
  text-align:center;
  width:100%;
  max-width:none;
  margin:14px 0 8px;
  font-size:13.5px;
  line-height:1.55;
  color:#64748B;
}

.pp-reviewwall-intro a{
  color:#2563EB;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
}
.pp-reviewwall-intro a:hover{
  color:#1D4ED8;
}

/* ---------- Base thème / utilitaires existants ---------- */
.ct-map { width: 100%; height:500px; border-radius: 30px; }

.stk--has-background-overlay:before { border-radius: inherit; }

.mon-bloc-invisible { display: none !important; }

/* Bouton Fluent Forms – présence + confort */
.fluentform .pp-btn-wrap { margin-top: 8px; }
.fluentform .pp-btn-submit.ff-btn-submit{
  border-radius:14px !important;
  font-weight:700;
  padding:14px 18px !important;
  box-shadow: 0 10px 24px rgba(248,158,3,.30);
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
  color:#0B1220 !important;
}
.fluentform .pp-btn-submit.ff-btn-submit:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(213,140,3,.36);
}
@media (max-width:640px){
  .fluentform .pp-btn-submit.ff-btn-submit{ width:100% !important; }
}

/* ---------- HOME : carrousel horizontal (pp-reviewwall) ---------- */
.pp-reviewwall{display:flex; flex-direction:column; gap:12px; margin:26px 0;}
.pp-row{overflow:hidden; border-radius:16px;}
.pp-track{
  display:flex; gap:12px; width:max-content; align-items:stretch; padding:2px;
  animation: ppMarquee 38s linear infinite;
  will-change: transform;
}
.pp-row--reverse .pp-track{ animation-direction: reverse; }
.pp-row:hover .pp-track{ animation-play-state: paused; }
@keyframes ppMarquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.pp-card{
  flex:0 0 340px;
  background:#fff; border:1px solid #E2E8F0; border-radius:16px;
  box-shadow: 0 6px 14px rgba(2,6,23,.05);
  padding:14px; color:#0B1220;
  display:flex; flex-direction:column; justify-content:space-between;
}
.pp-top{display:flex; align-items:center; gap:10px; margin-bottom:6px;}
.pp-avatar{width:44px; height:44px; border-radius:50%; object-fit:cover;}
.pp-name{font-weight:800;}
.pp-stars{color:#F59E0B; letter-spacing:1px; font-size:14px;}
.pp-text{margin:6px 0 8px;}
.pp-meta{font-size:12.5px; color:#64748B;}
.pp-meta a{color:#0B1220; text-decoration:underline; text-underline-offset:2px}
.pp-meta a:hover{opacity:.85}
@media (max-width:1024px){ .pp-card{ flex-basis:300px; } .pp-track{ animation-duration:36s; } }
@media (max-width:768px){
  .pp-card{ flex-basis:85vw; }
  .pp-track{ animation-duration:34s; }
  .pp-reviewwall .pp-row:nth-child(3){ display:none; }
}
.pp-reviewwall__head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 12px; }
.pp-reviews-title{ margin:0; font-size:22px; }
.pp-reviews-chips{ display:flex; gap:10px; flex-wrap:wrap }
.pp-chip{
  display:flex; align-items:center; gap:8px;
  background:#F8FAFC; border:1px solid #E2E8F0; color:#0B1220;
  padding:8px 10px; border-radius:999px; font-size:13.5px;
}
.pp-chip__stars{letter-spacing:2px; color:#F59E0B;}
@media (max-width:640px){ .pp-reviewwall__head{flex-direction:column; align-items:flex-start;} }

/* Bouton ghost réutilisable */
.pp-btn-ghost{
  display:inline-block; padding:10px 14px; border-radius:12px;
  border:1px solid #E2E8F0; color:#0B1220; background:#fff; text-decoration:none; font-weight:600;
}
.pp-btn-ghost:hover{ background:#F8FAFC; }

/* ---------- PAGE À PROPOS : Mur en grille (pp-wall) sans filtre ---------- */
.pp-wall{margin:28px 0;}
.pp-wall__head{ margin-bottom:16px; }
.pp-wall__head h2{ margin:0; font-size:26px; }

.pp-grid{ column-count:3; column-gap:14px; }
.pp-item{
  break-inside: avoid; background:#fff; border:1px solid #E2E8F0; border-radius:14px;
  padding:14px; margin:0 0 14px;
  box-shadow:0 6px 14px rgba(2,6,23,.05); color:#0B1220;
}
.pp-item__top{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.pp-item__top img{ border-radius:50%; width:48px; height:48px; object-fit:cover; }
.pp-name{ font-weight:800; }
.pp-stars{ color:#F59E0B; letter-spacing:1px; font-size:14px; }
.pp-item p{ margin:6px 0 6px; }
.pp-badge{
  display:inline-block; margin-top:6px; font-size:12.5px; padding:6px 8px;
  border-radius:999px; background:#0F172A; color:#fff; text-decoration:none;
}
.pp-badge.is-muted{ background:#475569; }

@media (max-width:1024px){ .pp-grid{ column-count:2; } }
@media (max-width:640px){  .pp-grid{ column-count:1; } }

.pp-btn-outline {
  display:inline-block;
  padding:8px 14px;
  border:1.8px solid #F89E03;
  border-radius:12px;
  color:#F89E03;
  font-weight:600;
  text-decoration:none;
  font-size:14px;
  transition:all .2s ease;
}
.pp-btn-outline:hover {
  background:#F89E03;
  color:#fff;
}
.pp-cta-center{ text-align:center; margin:14px 0 4px; }
.pp-btn-outline{ display:inline-block; }

@media (max-width:640px){
  .pp-btn-outline{ width:auto; }
}
/* ===== Bon plan du moment — mini ===== */
.pp-hotdeal-mini{
  border:1px solid #E2E8F0; border-radius:14px; padding:12px 14px;
  background:#fff; color:#0B1220; margin:14px 0 8px;
  box-shadow:0 6px 14px rgba(2,6,23,.05);
}
.pp-hotdeal-mini__row{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.pp-hotdeal-mini h3{
  margin:0; font-size:18px; line-height:1.25; font-weight:800; color:#0B1220;
}
.pp-amount{ color:#F89E03; font-weight:900; }
.pp-badge-new{
  display:inline-block; margin-right:8px; padding:4px 8px; border-radius:999px;
  background:rgba(248,158,3,.12); border:1px solid #F89E03; color:#A15F00; font-weight:700; font-size:12px;
}
.pp-hotdeal-mini__meta{ margin:8px 0 0; font-size:12.5px; color:#64748B; }

.pp-btn-primary.pp-btn-sm{
  display:inline-block; background:#F89E03; color:#0B1220; text-decoration:none;
  padding:8px 12px; border-radius:10px; font-weight:800; font-size:14px;
  box-shadow:0 8px 18px rgba(248,158,3,.28);
  transition:transform .06s ease, box-shadow .2s ease;
}
.pp-btn-primary.pp-btn-sm:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(213,140,3,.32); }

@media (max-width:640px){
  .pp-hotdeal-mini__right{ width:100%; }
  .pp-btn-primary.pp-btn-sm{ width:100%; text-align:center; }
}

.pp-hotdeal-mini__meta .pp-amount{
  color:#F89E03;
  font-weight:800;
}
.pp-hotdeal-mini__desc{
  margin:8px 0 0; color:#334155; font-size:14px;
}

/* === CTA principal : reflet (sheen) au survol — Fluent Forms + Gutenberg === */
.fluentform .pp-btn-submit.ff-btn-submit,
.wp-block-button .pp-btn-primary{
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.fluentform .pp-btn-submit.ff-btn-submit::after,
.wp-block-button .pp-btn-primary::after{
  content:"";
  position:absolute;
  top:-50%;
  left:-30%;
  width:22%;
  height:200%;
  pointer-events:none;
  background:linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.45) 50%,
    rgba(255,255,255,0) 100%
  );
  transform:translateX(-140%) skewX(-18deg);
  transition:transform .7s ease;
  border-radius:inherit;
}

.fluentform .pp-btn-submit.ff-btn-submit:hover::after,
.wp-block-button .pp-btn-primary:hover::after{
  transform:translateX(520%) skewX(-18deg);
}

@media (prefers-reduced-motion: reduce){
  .fluentform .pp-btn-submit.ff-btn-submit::after,
  .wp-block-button .pp-btn-primary::after{ display:none; }
}
/* ===== CTA : ping discret (vague lumineuse) ===== */
.pp-anim-ping{ position:relative; z-index:0; overflow:visible; border-radius:14px; }

.pp-anim-ping::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:inherit;
  box-shadow:0 0 0 0 rgba(248,158,3,.0);
  pointer-events:none;
  animation:ppPing 7s ease-out infinite;
}

@keyframes ppPing{
  0%   { box-shadow:0 0 0 0 rgba(248,158,3,0); }
  6%   { box-shadow:0 0 0 0 rgba(248,158,3,.38); }
  32%  { box-shadow:0 0 0 14px rgba(248,158,3,0); }
  100% { box-shadow:0 0 0 0 rgba(248,158,3,0); }
}

@media (prefers-reduced-motion: reduce){
  .pp-anim-ping::before{ animation:none; }
}

/* ===== Bouton header : version compacte + texte court sur mobile =====
   ⚠️ OBSOLÈTE dès que le nouveau header natif (Bloc H) est en ligne : ce bouton
   appartenait à l'ancien header Blocksy. À supprimer une fois la bascule confirmée,
   pas avant (le temps de vérifier qu'aucune autre page ne le référence encore). */
@media (max-width: 768px){
  .pp-header-btn-mobile{
    padding: 6px 10px !important;
    font-size: 0 !important;
    line-height: 1.1 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 10px rgba(248,158,3,.25) !important;
    white-space: nowrap;
    position: relative;
  }

  .pp-header-btn-mobile::after{
    content: "🔥 Bons plans";
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
    display: inline-block;
  }
}

/* Neutralisation des rangées Blocksy autour du header HTML natif (Bloc H).
   Sans ça, un vide apparaît entre le header et le haut de page.
   NE PAS RETIRER tant que le header vit dans le Header Builder Blocksy. */
#header [data-row="top"],
#header [data-row="bottom"] {
    display: none !important;
}
#header [data-row="middle"],
#header [data-row="middle"] .ct-container-fluid,
#header [data-row="middle"] [data-column],
#header [data-row="middle"] [data-items] {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.entry-content.is-layout-constrained{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

footer [data-row]{
    padding-top: 0 !important;
    min-height: 0 !important;
}
.ct-footer [data-row]{
    padding-top: 0 !important;
    min-height: 0 !important;
}

#main [data-content="normal"]{
  --content-vertical-spacing: 0px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ===================== HEADER PrimeParrain v4.3 — DÉBUT =====================
   Tout le CSS du header vit ICI (Customizer) et JAMAIS dans un <style> du bloc
   HTML : wpautop ne touche pas au Customizer. C'est la principale protection
   contre l'incident v4.1. Ne pas dupliquer ces règles dans le bloc header.
   Mega-menu 100 % CSS (:hover / :focus-within), burger 100 % CSS (:has).
   ========================================================================== */

/* ⚠️ Valeur live constatée chez Boris : 0px + 38px (et non 62px + 38px comme prevu
   a la conception). Bandeau + nav etant tous deux fixed, le body devrait reserver
   38 + 62 = 100px. A verifier visuellement en haut de la homepage mobile bandeau
   ouvert : si le contenu est rogne par la nav, repasser a calc(62px + 38px). */
body{ padding-top:calc(0px + 38px); }
html.pp-promo-dismissed body{ padding-top:62px; }

/* Filets de sécurité anti-wpautop : si WordPress glisse un <p> ou un <br> dans
   le header, ils deviennent transparents au lieu de casser la mise en page.
   Aucun <p> volontaire n'existe dans le bloc header. */
.pp-nav p{ display:contents; }
.pp-nav br{ display:none; }
.pp-promo p{ display:contents; }
.pp-promo br{ display:none; }

/* --- Bandeau promo : fixe au-dessus de la nav, refermable (mémorisé en
   localStorage). Pas de scroll à gérer : les deux restent épinglés tant que
   le bandeau n'est pas fermé, la nav remonte ensuite. --- */
.pp-promo{ position:fixed; top:0; left:0; right:0; z-index:61; background:var(--pp-ink); }
html.pp-promo-dismissed .pp-promo{ display:none; }
.pp-promo__in{ position:relative; max-width:1120px; margin:0 auto; padding:8px 46px 8px 18px; font-family:var(--pp-font-body); font-size:.8rem; line-height:1.35; text-align:center; }
.pp-promo__l1{ display:block; color:var(--pp-paper); text-decoration:none; }
.pp-promo__l1:hover{ text-decoration:underline; }
.pp-promo__l1 b{ color:var(--pp-orange); font-weight:700; }
.pp-promo__l2{ display:none; }
.pp-promo__close{ position:absolute; top:50%; right:10px; transform:translateY(-50%); width:24px; height:24px; display:grid; place-items:center; background:transparent; border:1px solid rgba(255,251,243,.28); border-radius:8px; color:var(--pp-paper); font-size:.85rem; line-height:1; cursor:pointer; }
.pp-promo__close:hover{ background:rgba(255,251,243,.12); }

.pp-nav{
  position:fixed; top:38px; left:0; right:0; z-index:60;
  background:color-mix(in srgb, var(--pp-paper) 92%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--pp-line);
  font-family:var(--pp-font-body);
}
html.pp-promo-dismissed .pp-nav{ top:0; }
.pp-nav__in{ display:flex; align-items:center; gap:10px; height:62px; }
.pp-nav__logo{ font-family:var(--pp-font-display); font-weight:800; font-size:1.05rem; text-decoration:none; color:var(--pp-ink); flex:none; margin-right:auto; }
.pp-nav__logo em{ font-style:normal; color:var(--pp-orange-deep); }

/* --- CTA : toujours visible, mobile comme desktop --- */
.pp-nav__cta{ flex:none; }
.pp-nav__cta .pp-btn{ padding:8px 12px; font-size:.8rem; border-radius:11px; box-shadow:0 3px 0 rgba(185,111,0,.5); white-space:nowrap; }
.pp-nav__cta-full{ display:none; }

/* --- Burger : case à cocher masquée + label, zéro JS --- */
.pp-nav__toggle{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:0 !important; border:0 !important; opacity:0 !important; clip-path:inset(50%); }
.pp-nav__burger{ flex:none; width:38px; height:38px; margin:0; cursor:pointer; display:grid; place-items:center; border-radius:11px; border:1px solid var(--pp-line); background:var(--pp-card); }
.pp-nav__burger i{ position:relative; display:block; width:17px; height:2px; border-radius:2px; background:var(--pp-ink); transition:background .18s ease; }
.pp-nav__burger i::before,
.pp-nav__burger i::after{ content:""; position:absolute; left:0; width:17px; height:2px; border-radius:2px; background:var(--pp-ink); transition:transform .22s ease; }
.pp-nav__burger i::before{ top:-6px; }
.pp-nav__burger i::after{ top:6px; }
.pp-nav:has(.pp-nav__toggle:checked) .pp-nav__burger i{ background:transparent; }
.pp-nav:has(.pp-nav__toggle:checked) .pp-nav__burger i::before{ transform:translateY(6px) rotate(45deg); }
.pp-nav:has(.pp-nav__toggle:checked) .pp-nav__burger i::after{ transform:translateY(-6px) rotate(-45deg); }
.pp-nav__burger:focus-within{ outline:2px solid var(--pp-orange); outline-offset:2px; }
.pp-nav__srt{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }

/* --- Menu mobile : panneau déroulant sous le header --- */
.pp-nav__links{
  display:none; position:absolute; top:100%; left:0; right:0;
  list-style:none; margin:0; padding:6px 20px 18px;
  background:var(--pp-paper); border-bottom:1px solid var(--pp-line);
  box-shadow:0 22px 44px rgba(20,18,16,.16);
  max-height:calc(100dvh - 62px); overflow-y:auto;
}
.pp-nav:has(.pp-nav__toggle:checked) .pp-nav__links{ display:block; }
.pp-nav__links li{ margin:0; }
.pp-nav__top{ display:block; padding:13px 2px; font-weight:700; font-size:1rem; color:var(--pp-ink); text-decoration:none; border-bottom:1px solid var(--pp-line); }
/* "Explorer" devient un simple intertitre sur mobile (non cliquable) */
.pp-nav__trigger{ pointer-events:none; padding:17px 2px 5px; font-size:.75rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--pp-ink-soft); border-bottom:0; }
.pp-nav__chev{ display:none; }

/* --- Cartes du menu Explorer --- */
.pp-nav__panel-grid{ display:block; }
.pp-nav__cards{ display:block; }
.pp-ncard{ display:flex; align-items:center; gap:11px; padding:11px 2px; text-decoration:none; color:var(--pp-ink); border-bottom:1px solid var(--pp-line); }
.pp-ncard i{ font-style:normal; flex:none; width:34px; height:34px; display:grid; place-items:center; font-size:1.4rem; line-height:1; }
/* Logo image dans une carte du panneau (Finary, et toute future carte a favicon).
   Reprend la boite de .pp-ncard i ET neutralise le margin:0 auto herite de
   .pp-ecard__lg : dans un conteneur flex, les marges auto absorbent l'espace libre
   et decentraient toute la carte (bug constate sur mobile, carte Finary). */
.pp-ncard img{ flex:none; margin:0; width:34px; height:34px; border-radius:9px; object-fit:cover; }
.pp-ncard__t{ display:block; min-width:0; }
.pp-ncard b{ display:block; font-family:var(--pp-font-display); font-weight:800; font-size:.95rem; color:var(--pp-ink); }
.pp-ncard__d{ display:none; }
.pp-ncard--soon{ opacity:.6; }
.pp-nav__ticket{ display:none; }
.pp-nav__more{ padding:13px 2px 0; font-size:.86rem; color:var(--pp-ink-soft); }
.pp-nav__more a{ color:var(--pp-ink); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.pp-nav__more a:hover{ color:var(--pp-orange-deep); }
.pp-nav__top.is-current{ color:var(--pp-orange-deep); }
.pp-ncard.is-sub b{ color:var(--pp-orange-deep); }

/* ============================== DESKTOP ============================== */
@media (min-width:820px){
  body{ padding-top:calc(66px + 40px); }
  html.pp-promo-dismissed body{ padding-top:66px; }
  .pp-nav{ top:40px; }
  html.pp-promo-dismissed .pp-nav{ top:0; }
  .pp-promo__in{ padding:10px 60px 10px 20px; font-size:.86rem; }
  .pp-promo__break{ display:none; }
  .pp-nav__in{ height:66px; gap:26px; }
  .pp-nav__logo{ font-size:1.15rem; }
  .pp-nav__toggle, .pp-nav__burger{ display:none !important; }
  .pp-nav__links{
    display:flex !important; align-items:center; gap:26px;
    position:static; padding:0; background:none; border:0; box-shadow:none;
    max-height:none; overflow:visible;
  }
  .pp-nav__cta .pp-btn{ padding:10px 18px; font-size:.92rem; }
  .pp-nav__cta-short{ display:none; }
  .pp-nav__cta-full{ display:inline; }

  /* Liens de premier niveau + soulignage de page active (repris de la v4.2) */
  .pp-nav__top{ display:inline-flex; align-items:center; position:relative; padding:0; border:0; font-weight:600; font-size:.95rem; color:var(--pp-ink-soft); }
  .pp-nav__top:hover{ color:var(--pp-ink); }
  .pp-nav__top.is-current{ color:var(--pp-ink); }
  .pp-nav__top.is-current::after{ content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; background:var(--pp-orange); border-radius:2px; }
  .pp-nav__trigger{ pointer-events:auto; padding:0; font-size:.95rem; font-weight:600; letter-spacing:normal; text-transform:none; color:var(--pp-ink-soft); }
  .pp-nav__chev{ display:inline-block; margin-left:5px; font-size:.6em; line-height:1; transform:translateY(1px); transition:transform .2s ease; }

  /* Zone de survol qui couvre toute la hauteur du header : aucune zone morte
     entre le lien "Explorer" et le haut du panneau. */
  .pp-nav__has-panel{ padding:24px 0; margin:-24px 0; }
  .pp-nav__has-panel:hover .pp-nav__trigger,
  .pp-nav__has-panel:focus-within .pp-nav__trigger{ color:var(--pp-ink); }
  .pp-nav__has-panel:hover .pp-nav__chev,
  .pp-nav__has-panel:focus-within .pp-nav__chev{ transform:translateY(1px) rotate(180deg); }

  /* Le panneau. Positionné par rapport à .pp-nav (fixed), donc centré sous le
     header quelle que soit la position de "Explorer" dans la barre.
     Ouverture retardée de 120 ms, fermeture de 200 ms : hover-intent en CSS. */
  .pp-nav__panel{
    position:absolute; top:100%; left:50%; width:min(1120px, calc(100vw - 32px));
    transform:translate(-50%,-8px);
    background:var(--pp-card); border:1px solid var(--pp-line); border-top:0;
    border-radius:0 0 var(--pp-radius) var(--pp-radius);
    box-shadow:0 28px 64px rgba(20,18,16,.17);
    padding:20px; opacity:0; visibility:hidden;
    transition:opacity .18s ease .2s, transform .18s ease .2s, visibility 0s linear .38s;
  }
  .pp-nav__has-panel:hover .pp-nav__panel,
  .pp-nav__has-panel:focus-within .pp-nav__panel{
    opacity:1; visibility:visible; transform:translate(-50%,0);
    transition:opacity .2s ease .12s, transform .2s ease .12s, visibility 0s linear .12s;
  }
  .pp-nav__panel-grid{ display:grid; grid-template-columns:1fr 258px; gap:20px; align-items:start; }
  .pp-nav__cards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .pp-ncard{
    align-items:flex-start; padding:14px; border:1px solid var(--pp-line);
    border-bottom:1px solid var(--pp-line); border-radius:14px; background:var(--pp-paper);
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .pp-ncard:hover{ transform:translateY(-3px); border-color:var(--pp-orange); box-shadow:0 12px 26px rgba(248,158,3,.16); }
  .pp-ncard i{ width:38px; height:38px; font-size:1.65rem; }
  .pp-ncard img{ width:38px; height:38px; }
  .pp-ncard b{ font-size:1rem; }
  .pp-ncard__d{ display:block; margin-top:3px; font-size:.81rem; color:var(--pp-ink-soft); }
  .pp-ncard.is-sub{ border-color:var(--pp-orange); }
  /* Carte fantôme : réserve la place des futurs comparatifs, pleine largeur */
  .pp-ncard--soon{ grid-column:1 / -1; border-style:dashed; background:transparent; }
  .pp-ncard--soon:hover{ transform:none; border-color:var(--pp-line); box-shadow:none; }

  /* Mini-ticket (reprend la signature visuelle du reçu du hero) */
  .pp-nav__ticket{
    display:block; text-decoration:none; color:var(--pp-ink);
    background:var(--pp-paper); border:1px solid var(--pp-orange-line);
    border-radius:16px; padding:15px 16px;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .pp-nav__ticket:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(248,158,3,.18); }
  .pp-nav__ticket-h{ display:block; font-family:var(--pp-font-display); font-weight:800; font-size:.95rem; margin-bottom:8px; }
  .pp-nav__ticket-r{ display:flex; justify-content:space-between; gap:10px; padding:7px 0; font-size:.82rem; color:var(--pp-ink-soft); }
  .pp-nav__ticket-r + .pp-nav__ticket-r{ border-top:1px dashed var(--pp-line); }
  .pp-nav__ticket-r b{ color:var(--pp-ink); white-space:nowrap; }
  .pp-nav__ticket-c{ display:block; margin-top:11px; font-weight:700; font-size:.85rem; color:var(--pp-orange-deep); }

  .pp-nav__more{ margin-top:16px; padding:13px 2px 0; border-top:1px solid var(--pp-line); font-size:.88rem; }
}

@media (prefers-reduced-motion: reduce){
  .pp-nav__panel, .pp-ncard, .pp-nav__ticket, .pp-nav__chev,
  .pp-nav__burger i, .pp-nav__burger i::before, .pp-nav__burger i::after{ transition:none !important; }
  .pp-ncard:hover, .pp-nav__ticket:hover{ transform:none; }
}

/* ====================== HEADER PrimeParrain v4.3 — FIN ====================== */

/* ============================================================
   COMPOSANTS PARTAGÉS — CTA milieu, Explorer, CTA final
   Factorisés ici depuis les <style> des blocs 7 et 10 (et du CTA milieu du hub).
   Les <style> correspondants ont été retirés des blocs : ne pas les remettre,
   sinon doublon et divergence garantie à la prochaine retouche.
   ============================================================ */

/* --- CTA milieu de page (hub) --- */
.pp-hub-mid{ font-family:var(--pp-font-body); color:var(--pp-ink); padding:14px 0; }
.pp-midbox{ background:var(--pp-orange-soft); border:1px dashed var(--pp-orange-line); border-radius:var(--pp-radius); padding:20px 22px; }
.pp-midbox__txt{ margin:0 0 14px; }
.pp-midbox__txt strong{ display:block; font-family:var(--pp-font-display); font-weight:800; font-size:1.05rem; letter-spacing:-.01em; color:var(--pp-ink); margin-bottom:3px; }
.pp-midbox__txt span{ font-size:.9rem; color:var(--pp-ink-soft); }
.pp-midbox__fine{ margin:12px 0 0; font-size:.76rem; font-weight:600; color:var(--pp-ink-soft); }

/* --- Bloc Explorer (Bloc 7) --- */
.pp-explore{ padding:60px 0; font-family:var(--pp-font-body); color:var(--pp-ink); }
.pp-explore .pp-h2{ font-family:var(--pp-font-display); font-size:clamp(1.55rem,5vw,2.4rem); font-weight:800; text-align:center; margin:0 0 12px; letter-spacing:-.02em; line-height:1.09; color:var(--pp-ink); }
.pp-explore .pp-sub{ text-align:center; color:var(--pp-ink-soft); max-width:560px; margin:0 auto 38px; }
.pp-explore__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px; }
.pp-ecard{ background:var(--pp-card); border:1px solid var(--pp-line); text-decoration:none; color:var(--pp-ink); border-radius:var(--pp-radius); padding:26px 20px; text-align:center; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.pp-ecard:hover{ transform:translateY(-5px); border-color:var(--pp-orange); box-shadow:0 12px 26px rgba(248,158,3,.16); }
.pp-ecard i{ font-style:normal; font-size:1.9rem; display:block; margin-bottom:12px; }
.pp-ecard h3{ font-family:var(--pp-font-display); font-size:1.05rem; font-weight:800; margin:0 0 7px; color:var(--pp-ink); }
.pp-ecard p{ font-size:.85rem; color:var(--pp-ink-soft); margin:0; }
.pp-explore__more{ text-align:center; margin:26px 0 0; font-size:.93rem; color:var(--pp-ink); }
.pp-explore__more a{ font-weight:700; text-decoration:underline; text-underline-offset:3px; color:var(--pp-ink); }
.pp-explore__more a:hover{ color:var(--pp-orange-deep); }
@media (min-width:600px){ .pp-explore{ padding:76px 0; } }

/* --- CTA final (Bloc 10) --- */
.pp-final{ margin-bottom:0 !important; background:var(--pp-orange); border-top:2px solid var(--pp-ink); font-family:var(--pp-font-body); color:var(--pp-ink); }
.pp-final__in{ text-align:center; padding:60px 20px; max-width:1120px; margin:0 auto; }
.pp-final h2{ font-family:var(--pp-font-display); font-size:clamp(1.6rem,5.5vw,2.6rem); font-weight:800; margin:0 0 12px; letter-spacing:-.02em; line-height:1.09; color:var(--pp-ink); }
.pp-final p{ font-weight:600; margin:0 0 28px; color:var(--pp-ink); }
.pp-final .pp-mark svg path{ stroke:var(--pp-ink); } /* trait encre : l'orange serait invisible sur fond orange */
.pp-final__capture{ max-width:640px !important; width:100% !important; margin:0 auto !important; }
.pp-trust--dark{ margin:30px 0 0; font-size:.83rem; font-weight:600; color:rgba(20,18,16,.75); }
.pp-trust--dark span{ display:inline-block; margin-right:14px; white-space:nowrap; }
.pp-final .pp-trust--dark{ margin-top:14px !important; }
@media (min-width:600px){ .pp-final__in{ padding:80px 20px; } }

/* Logo de marque dans une carte Explorer (favicon 32px, centré au-dessus du titre).
   ⚠️ Cette règle porte des marges auto : elle casse tout conteneur flex qui
   l'hériterait. C'est ce qui décentrait la carte Finary du mega-menu, d'où la
   règle .pp-ncard img plus haut qui les neutralise. */
.pp-ecard__lg{ margin:0 auto 12px; display:block; }