/* ════════════════════════════════════════════════════════════════
   pape-france.fr — RÉCHAUFFEMENT V3 (jaune / orangé d'ambiance)
   Cible les VRAIES classes de production (papefrance-*).
   À charger APRÈS tous les autres CSS (dernier dans la file).
   ────────────────────────────────────────────────────────────────
   Règle d'or : le jaune plein en pilule reste réservé aux CTA.
   Ici, uniquement filets, fonds crème chauds, liserés, puces.
   Curseur : --warm-bg (fonds) et --accent-warm (accent chaud).
   ════════════════════════════════════════════════════════════════ */
:root{
  --warm-bg: #f6f1e6;
  --accent-warm: var(--yellow);
  --accent-warm-text: var(--yellow-AA);
}

/* ── 1. Filet des eyebrows en doré ─────────────────────────────── */
.papefrance-eyebrow::before{ background: var(--accent-warm) !important; }

/* ── 3. Fonds de section crème chaud (alternance) ──────────────── */
/* Annonce + FAQ + tout onepage-section pair → crème doré */
.papefrance-annonce{ background: var(--warm-bg) !important; }
.papefrance-faq,
.onepage-section:nth-of-type(even){ background: var(--warm-bg) !important; }

/* ── 4. Cartes étape : liseré bas doré au survol ───────────────── */
.papefrance-etape{ position: relative; overflow: hidden; }
.papefrance-etape::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--accent-warm); transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease; z-index: 2;
}
.papefrance-etape:hover::after{ transform: scaleX(1); }
.papefrance-etape:hover{ box-shadow: 0 14px 30px -18px rgba(138,90,0,.4); }

/* ── 5. Compte à rebours : filet doré sous chaque bloc ─────────── */
.papefrance-countdown__unit{ position: relative; padding-bottom: 12px; }
.papefrance-countdown__unit::after{
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 22px; height: 3px; border-radius: 2px; background: var(--accent-warm);
}

/* ── 6. Titres : « virgule » d'accent sur les <em> des h2 ──────── */
.papefrance-h2 em{ color: var(--accent-warm-text) !important; font-style: italic; }

/* ── 7. Soulignés dorés dans le corps de texte ─────────────────── */
.papefrance-annonce__body a,
.papefrance-lead a{
  text-decoration-color: var(--accent-warm-text);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ── 8. Filet doré haut sur la 1re section (liaison au hero) ───── */
/*.papefrance-annonce{ border-top: 3px solid var(--accent-warm); }*/
.papefrance-hero{ border-bottom: 3px solid var(--accent-warm); }

/* ════════════════════════════════════════════════════════════════
   DYNAMISME — mouvement & profondeur (surcouche)
   ════════════════════════════════════════════════════════════════ */

/* 9. Cartes étape : zoom d'image + soulèvement au survol */
.papefrance-etape__img{ transition: transform .5s cubic-bezier(.2,.6,.2,1); will-change: transform; }
.papefrance-etape:hover .papefrance-etape__img{ transform: scale(1.06); }
.papefrance-etape{ transition: transform .28s ease, box-shadow .28s ease; }
.papefrance-etape:hover{ transform: translateY(-6px); }

/* 10. Halo doré animé derrière le compte à rebours */
.papefrance-countdown{ position: relative; }
.papefrance-countdown::before{
  content: ""; position: absolute; inset:-30px -10px; z-index:-1;
  background: radial-gradient(ellipse at center, rgba(255,161,7,.18), transparent 70%);
  animation: pf-pulse 4s ease-in-out infinite;
}
@keyframes pf-pulse{ 0%,100%{opacity:.5; transform: scale(.96)} 50%{opacity: 1; transform: scale(1.04)} }

/* 11. Chiffres du compte à rebours : léger “tick” à la seconde */
/*.papefrance-countdown__unit .num{ display: inline-block; animation: pf-tick 1s steps(1) infinite; }
@keyframes pf-tick{ 0%{transform: translateY(0)} 4%{transform: translateY(-2px)} 10%{transform: translateY(0)} }*/

/* 12. Eyebrows : filet qui “grandit” à l'entrée de section */
.papefrance-eyebrow::before{
  transition: width .5s cubic-bezier(.2,.6,.2,1);
}
.onepage-section:hover .papefrance-eyebrow::before,
.papefrance-etapes:hover .papefrance-eyebrow::before{ width: 56px; }

/* 13. Titres h2 : l'<em> ambré se souligne d'un trait qui se déploie */
.papefrance-h2 em{ position: relative; }
.papefrance-h2 em::after{
  content: ""; position: absolute; left: 0; right: 0; bottom:-2px; height: 3px;
  background: var(--accent-warm); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .5s ease .1s;
}
.papefrance-annonce:hover .papefrance-h2 em::after,
.papefrance-etapes:hover .papefrance-h2 em::after{ transform: scaleX(1); }

/* 14. Boutons CTA : reflet doré qui balaie au survol (sans toucher la couleur) */
.papefrance-btn-cta, .pf-btn-cta, .wp-block-button__link{
  position: relative; overflow: hidden;
}
.papefrance-btn-cta::after, .pf-btn-cta::after{
  content: ""; position: absolute; top: 0; left:-120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); transition: left .6s ease;
}
.papefrance-btn-cta:hover::after, .pf-btn-cta:hover::after{ left: 130%; }

/* 15. Apparition douce des sections au scroll (respecte prefers-reduced-motion) */
@media (prefers-reduced-motion:no-preference){
  .onepage-section, .papefrance-etapes, .papefrance-annonce{
    animation: pf-rise .7s cubic-bezier(.2,.6,.2,1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
  @keyframes pf-rise{ from{opacity: 0; transform: translateY(28px)} to{opacity: 1; transform: none} }
}

/* 16. Coupe tout le mouvement si l'utilisateur le demande */
@media (prefers-reduced-motion:reduce){
  .papefrance-etape__img, .papefrance-etape,
  .papefrance-countdown::before, .papefrance-countdown__unit .num,
  .papefrance-btn-cta::after, .pf-btn-cta::after,
  .onepage-section, .papefrance-etapes, .papefrance-annonce{
    animation: none !important; transition: none !important; transform: none !important;
  }
}