/* ---- Montserrat servie depuis kimonoconseil.com (fichier Google Fonts v31, latin, 300 a 900) ---- */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300 900;font-display:swap;
  src:url(https://kimonoconseil.com/pyronnet-lp/fonts/montserrat-latin-300-900-v31.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ============================================================
   FICHIER GENERE - ne pas editer a la main.
   Source : 3-mobile-source.css   Generateur : build_mobile_css.py
   ============================================================ */
/* ============================================================
   LP SIGNATURE Entrepreneur — version mobile
   Reflow du canevas 1440 vers le flux, d'apres la maquette Figma
   "Mobile version" (node 169:6442, 393 x 8335).

   Source unique des deux versions. build_mobile_css.py en tire 3-mobile.css,
   prefixee en ppi-, servie depuis kimonoconseil.com et chargee par le script
   d'en-tete de systeme.io. index.html charge ce fichier-ci directement.

   Le canevas desktop est conserve tel quel au-dessus de 768 px : la mise a
   l'echelle y fonctionne tres bien. En dessous, elle ramenait le corps de
   texte a 4 px, d'ou ce passage en flux.

   Piege de cascade, mesure en compte reel : dans systeme.io le <style> du
   bloc vit dans le body et cette feuille dans le head, donc a specificite
   egale le bloc gagne. Chaque selecteur est ancre sur le conteneur de la
   page et les proprietes de mise en page portent !important.

   Valeurs reprises de la maquette mobile : padding lateral 20 px, titre de
   hero a 25 px (contre 45), boutons empiles en pleine largeur, grille de
   benefices en liste a icone laterale.
   ============================================================ */

@media (max-width: 767px){

  /* ---- le canevas redevient un document normal ---- */
  #ppi-lp-viewport{height:auto!important;overflow:visible!important;width:100%!important}
  #ppi-lp{
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    transform:none!important;
    margin:0!important;
    background:#16171a;
    display:flex!important;
    flex-direction:column!important;
  }
  #ppi-lp .ppi-abs{
    position:static!important;
    left:auto!important; top:auto!important; right:auto!important; bottom:auto!important;
    width:100%!important; max-width:100%!important; height:auto!important;
  }
  /* rien ne doit pousser le document au-dela de l'ecran */
  #ppi-lp *{max-width:100%}

  /* ---- fonds decoratifs du canevas : remplaces par des fonds de section ---- */
  #ppi-lp #ppi-bg-hero,#ppi-lp #ppi-bg-dark-1,#ppi-lp #ppi-bg-dark-2,
  #ppi-lp #ppi-bg-dark-3,#ppi-lp #ppi-halo-1,#ppi-lp #ppi-halo-2{display:none!important}

  /* ---- navigation : le menu disparait, il ne reste que logo et bouton ---- */
  #ppi-lp #ppi-nav{
    display:flex!important; align-items:center!important; justify-content:space-between!important;
    gap:10px!important; padding:23px 16px!important;
    background:#16171a;
  }
  #ppi-lp #ppi-nav .ppi-links{display:none!important}
  /* mesure a 360 px : logo 106 + bouton 221 + gouttieres = 379, soit 19 px de
     trop. Le logo et le bouton se resserrent plutot que de pousser la page. */
  #ppi-lp #ppi-nav>img{max-width:100px!important;height:auto!important;flex:0 0 auto!important}
  #ppi-lp #ppi-nav .ppi-btn{
    font-size:12px!important;padding:10px 14px!important;height:36px!important;
    flex:0 1 auto!important;min-width:0!important;white-space:nowrap!important;
  }

  /* ---- hero : une colonne, image en fond de section ---- */
  #ppi-lp #ppi-hero{
    display:flex!important; flex-direction:column!important; gap:30px!important;
    padding:32px 20px 48px!important;
    background:#16171a url("https://kimonoconseil.com/pyronnet-lp/img/bg-hero.webp") center/cover no-repeat;
  }
  /* la date tient tout juste a 375 px et sauterait a 360 : le texte revient a
     la ligne dans son propre bloc. Pas de flex-wrap sur le conteneur, sinon
     c'est la puce qui part seule sur la ligne du dessus. */
  #ppi-lp #ppi-hero .ppi-kicker{flex-wrap:nowrap!important;align-items:flex-start!important;gap:10px!important}
  #ppi-lp #ppi-hero .ppi-kicker .ppi-dot{margin-top:6px!important}
  #ppi-lp #ppi-hero .ppi-kicker span{white-space:normal!important;flex:1 1 auto!important;min-width:0!important}
  #ppi-lp #ppi-hero h1{width:100%!important;font-size:25px!important;line-height:1.2!important}
  #ppi-lp #ppi-hero .ppi-sub{width:100%!important;font-size:16px!important}
  #ppi-lp #ppi-hero .ppi-actions{
    display:flex!important; flex-direction:column!important; gap:23px!important; width:100%!important;
  }
  #ppi-lp #ppi-hero .ppi-actions .ppi-btn{width:100%!important;justify-content:center!important}

  /* ---- bandeau de chiffres : grille 2 x 2 dans la largeur, sans defilement ---- */
  #ppi-lp #ppi-logos{
    background:#16171a; padding:22px 0 24px!important;
    overflow:hidden!important; display:block!important;
  }
  #ppi-lp #ppi-logos .ppi-label{
    position:static!important; width:100%!important; text-align:center!important;
    padding:0 20px 16px!important;
    /* hauteur fixe de 17 px sur ordinateur : sur deux lignes le libelle recouvrait les chiffres */
    height:auto!important; line-height:1.35!important;
  }
  #ppi-lp #ppi-logos .ppi-strip{
    position:static!important; width:100%!important; max-width:100%!important;
    height:auto!important; padding:0 16px!important;
  }
  #ppi-lp #ppi-logos .ppi-chiffres{
    display:grid!important; grid-template-columns:1fr 1fr!important; gap:18px 12px!important;
    height:auto!important; align-items:start!important;
  }
  #ppi-lp #ppi-logos .ppi-sep{display:none!important}
  #ppi-lp #ppi-logos .ppi-chiffre{
    display:flex!important; flex-direction:column!important; align-items:center!important; gap:4px!important;
    white-space:normal!important; text-align:center!important; font-size:13px!important; line-height:1.3!important;
  }
  #ppi-lp #ppi-logos .ppi-chiffre b{font-size:26px!important; line-height:1.1!important}

  /* ---- carte formulaire : une seule colonne ---- */
  #ppi-lp #ppi-optin-card{
    display:flex!important; flex-direction:column!important; gap:21px!important;
    width:auto!important; margin:0 13px!important;
    padding:21px!important; border-radius:20px!important;
  }
  #ppi-lp #ppi-optin-card .ppi-left,
  #ppi-lp #ppi-optin-card .ppi-right,
  #ppi-lp #ppi-optin-slot{width:100%!important;flex:none!important}
  #ppi-lp #ppi-optin-card h2{font-size:28px!important;line-height:1.25!important}
  #ppi-lp #ppi-optin-card .ppi-lead{font-size:15px!important}
  #ppi-lp #ppi-optin-card .ppi-proof{margin:0 auto!important}

  /* ---- programme : cartes pleine largeur, intervenants empiles ---- */
  #ppi-lp #ppi-programme{padding:48px 20px!important;background:#16171a}
  #ppi-lp #ppi-programme .ppi-head h2{font-size:25px!important;white-space:normal!important}
  #ppi-lp #ppi-programme .ppi-head .ppi-lead{width:100%!important;font-size:16px!important}
  #ppi-lp #ppi-programme .ppi-cards{width:100%!important}
  #ppi-lp .ppi-soiree{padding:20px!important;border-radius:16px!important;width:100%!important}
  #ppi-lp .ppi-soiree h3{font-size:22px!important}
  /* la ligne de date porte desormais le nom de la soiree : en nowrap elle
     depassait de 42 px a 375 px d'ecran */
  #ppi-lp .ppi-soiree .ppi-date{white-space:normal!important}
  #ppi-lp .ppi-soiree .ppi-speakers{
    display:flex!important; flex-direction:column!important; align-items:flex-start!important;
    gap:15px!important;
  }
  /* la ligne d'intervenant garde une largeur fixe de 280 px, qui deborde a
     320 px une fois le padding de la carte deduit */
  #ppi-lp .ppi-soiree .ppi-speaker{width:auto!important;max-width:100%!important}
  /* le nom et la fonction sont en nowrap : "Fondateur du Paul Pyronnet
     Institut" fait 232 px pour 220 disponibles a 320 px d'ecran */
  #ppi-lp .ppi-soiree .ppi-speaker>span{min-width:0!important;white-space:normal!important}
  #ppi-lp .ppi-soiree .ppi-speaker .ppi-n,
  #ppi-lp .ppi-soiree .ppi-speaker .ppi-r{white-space:normal!important}
  #ppi-lp .ppi-soiree .ppi-bullet p{font-size:15px!important}
  #ppi-lp #ppi-programme .ppi-cta,#ppi-lp #ppi-benefices .ppi-cta{width:100%!important}
  #ppi-lp #ppi-programme .ppi-cta .ppi-btn,
  #ppi-lp #ppi-benefices .ppi-cta .ppi-btn{width:100%!important;justify-content:center!important}

  /* ---- benefices : la grille 4x2 devient une liste a icone laterale ---- */
  #ppi-lp #ppi-benefices{padding:56px 20px!important;background:#ffffff}
  #ppi-lp #ppi-benefices .ppi-head{width:100%!important}
  #ppi-lp #ppi-benefices .ppi-head h2{font-size:25px!important}
  #ppi-lp #ppi-benefices .ppi-head .ppi-lead{font-size:15px!important}
  #ppi-lp #ppi-benefices .ppi-grid{gap:20px!important;width:100%!important}
  #ppi-lp #ppi-benefices .ppi-grid-row{
    display:flex!important; flex-direction:column!important; gap:20px!important; width:100%!important;
  }
  #ppi-lp .ppi-benef{
    display:grid!important;
    grid-template-columns:47px 1fr!important;
    column-gap:20px!important; row-gap:0!important;
    align-items:start!important; width:100%!important;
  }
  #ppi-lp .ppi-benef .ppi-ico{grid-row:1 / span 2!important}
  #ppi-lp .ppi-benef .ppi-t{grid-column:2!important}
  #ppi-lp .ppi-benef>div{grid-column:2!important}

  /* ---- temoignages : carrousel horizontal ---- */
  #ppi-lp #ppi-temoignages{padding:40px 0!important;background:#16171a}
  #ppi-lp #ppi-temoignages .ppi-head{
    flex-direction:column!important; gap:20px!important; padding:0 20px!important; width:100%!important;
  }
  #ppi-lp #ppi-temoignages h2{width:100%!important;font-size:25px!important;text-align:left!important}
  #ppi-lp #ppi-temoignages .ppi-arrows{order:3;align-self:center!important;margin-top:8px!important}
  #ppi-lp #ppi-temoignages .ppi-track{
    height:auto!important; width:100%!important;
    overflow-x:auto!important; overflow-y:hidden!important; scroll-snap-type:x mandatory;
    padding:0 20px!important; gap:15px!important;
  }
  #ppi-lp #ppi-temoignages .ppi-temo{
    flex:0 0 260px!important; min-width:260px!important; max-width:260px!important;
    height:auto!important; scroll-snap-align:start; padding:10px!important;
  }
  #ppi-lp #ppi-temoignages .ppi-cta{width:auto!important;margin:0 20px!important}
  #ppi-lp #ppi-temoignages .ppi-cta .ppi-btn{width:100%!important;justify-content:center!important}

  /* ---- intervenants : deux cartes visibles, le reste au defilement ---- */
  #ppi-lp #ppi-interv-head{
    padding:56px 20px 0!important; background:#ffffff;
    display:flex!important; align-items:center!important; justify-content:space-between!important; gap:12px!important;
  }
  #ppi-lp #ppi-interv-head h2{font-size:25px!important}
  #ppi-lp #ppi-interv-head .ppi-arrows button{background:#e8e8e8}
  #ppi-lp #ppi-interv{
    background:#ffffff; padding:20px!important; width:100%!important;
    overflow-x:auto!important; overflow-y:hidden!important; scroll-snap-type:x mandatory; gap:15px!important;
  }
  #ppi-lp .ppi-interv-card{
    flex:0 0 224px!important; min-width:224px!important; max-width:224px!important;
    height:325px!important; scroll-snap-align:start; padding:0 20px 20px!important;
  }

  /* ---- FAQ : le titre passe au-dessus de la liste ---- */
  #ppi-lp #ppi-faq{
    display:flex!important; flex-direction:column!important; gap:24px!important;
    padding:40px 20px 56px!important; background:#ffffff;
  }
  #ppi-lp #ppi-faq h2{width:100%!important;font-size:25px!important}
  #ppi-lp #ppi-faq .ppi-list{width:100%!important}
  #ppi-lp .ppi-faq-q{gap:20px!important}
  #ppi-lp .ppi-faq-q .ppi-q{font-size:16px!important;line-height:24px!important}
  #ppi-lp .ppi-faq-a p{font-size:16px!important;line-height:24px!important}

  /* ---- CTA final ---- */
  #ppi-lp #ppi-cta-final{
    padding:56px 16px!important; background:#16171a;
    display:flex!important; flex-direction:column!important; gap:21px!important; align-items:center!important;
  }
  #ppi-lp #ppi-cta-final h2{width:100%!important;font-size:35px!important;line-height:1.15!important;letter-spacing:-.5px!important}
  #ppi-lp #ppi-cta-final .ppi-lead{width:100%!important;font-size:17px!important}
  #ppi-lp #ppi-cta-final .ppi-wrap,#ppi-lp #ppi-cta-final .ppi-inner{width:100%!important;height:auto!important}
  #ppi-lp #ppi-cta-final .ppi-btn{width:100%!important;justify-content:center!important}

  /* ---- bande photos : meme defilement automatique qu'en desktop, a la taille mobile ---- */
  #ppi-lp #ppi-bande{
    background:#16171a; padding:0 0 40px!important; width:100%!important; height:auto!important;
    overflow:hidden!important;
  }
  #ppi-lp #ppi-bande .ppi-bande-track{height:158px!important}
  #ppi-lp #ppi-bande .ppi-bande-track>div{flex:0 0 273px!important;width:273px!important;max-width:273px!important;height:158px!important;margin-right:15px!important}

  /* ---- footer ---- */
  #ppi-lp #ppi-footer{
    padding:0 20px 40px!important; background:#16171a;
    display:flex!important; flex-direction:column!important; gap:15px!important; align-items:center!important;
  }
  #ppi-lp #ppi-footer .ppi-txt{width:100%!important;font-size:12px!important;line-height:22px!important}

  /* ---- compte a rebours ---- */
  #ppi-lp #ppi-countdown{justify-content:flex-start!important}

  /* ---- barres de defilement discretes sur les zones qui debordent ---- */
  #ppi-lp #ppi-temoignages .ppi-track,#ppi-lp #ppi-interv,
  #ppi-lp #ppi-bande,#ppi-lp #ppi-logos{
    scrollbar-width:none; -ms-overflow-style:none;
  }
  #ppi-lp #ppi-temoignages .ppi-track::-webkit-scrollbar,#ppi-lp #ppi-interv::-webkit-scrollbar,
  #ppi-lp #ppi-bande::-webkit-scrollbar,#ppi-lp #ppi-logos::-webkit-scrollbar{display:none}
}

/* Tres petits ecrans (iPhone SE 1re generation, 320 px) : meme resserre, le
   bouton de la navigation ne tient plus a cote du logo. Il passe dessous. */
@media (max-width: 359px){
  #ppi-lp #ppi-nav{flex-wrap:wrap!important;justify-content:center!important}
  #ppi-lp #ppi-nav .ppi-btn{width:100%!important;justify-content:center!important}
}

/* Palier intermediaire : entre 768 et 1000 px la mise a l'echelle du canevas
   tient encore, mais on evite qu'elle descende trop bas. */
@media (min-width: 768px) and (max-width: 1000px){
  /* origine en haut a gauche, comme le script d'en-tete qui aligne le canevas a gauche :
     en « top center », l'iPad en portrait (768 a 1000 px) voyait la page decalee de 340 px
     vers la droite et coupee (constate le 15/09) */
  #ppi-lp{transform-origin:top left!important}
}

/* === CORRECTIFS TOUS ECRANS · 10/09/2026 === */
/* Hors media query : cette feuille est chargee sur tous les ecrans par le script
   d'en-tete, et c'est le seul fichier de la landing page deployable sans recoller
   le bloc dans systeme.ppi-io. Selecteurs ancres sur #ppi-lp avec !important : le <style>
   du bloc vit dans le body et gagne a specificite egale contre une feuille du head. */

/* Badge « Christele Albaret · Psychosociologue » glisse par erreur dans la grille
   « Ce que vous allez apprendre » le 04/09 (commit cfc634c10) : le script qui posait
   son portrait sur la carte intervenant a aussi insere une puce apres la carte
   « Le vrai blocage ». Absent de la maquette. */
#ppi-lp #ppi-benefices .ppi-speaker{display:none!important}

/* Jonction hero / bandeau logos. La maquette enchaine le fond du hero et le bandeau
   sans rupture ; l'arrondi bas de 20 px du hero laissait voir le fond de page dans
   les deux coins, au-dessus d'un bandeau a angles droits. */
#ppi-lp #ppi-bg-hero{border-radius:0!important}

/* Marges des rangees systeme.ppi-io */
/* L'API a mis les marges de la section et des rangees a zero, mais seulement pour
   le desktop : la marge mobile des rangees (5 px) n'est pas exposee et laissait un
   liseré autour de la page sur telephone. Selecteur d'attribut, que le generateur
   ne prefixe pas : il vise les conteneurs de systeme.ppi-io, pas le bloc. */
[id^="row-"]{padding:0!important}

/* ---- charte PPI : formulaire natif, surcharge du script d'en-tete ---- */
html body #ppi-optin-slot input[type=text],html body #ppi-optin-slot input[type=email],html body #ppi-optin-slot input[type=tel]{
  border-color:rgba(22,23,26,.28)!important;color:#16171a!important;font-family:Montserrat,sans-serif!important}
html body #ppi-optin-slot input[type=text]:focus,html body #ppi-optin-slot input[type=email]:focus{
  border-color:#16171a!important;box-shadow:0 0 0 3px rgba(255,253,84,.6)!important}
html body #ppi-optin-slot label{color:rgba(22,23,26,.72)!important;font-family:Montserrat,sans-serif!important}
html body #ppi-optin-slot input[type=checkbox]{accent-color:#16171a!important}
html body #ppi-optin-slot button[type=submit],html body #ppi-optin-slot #submit-button-f3dae246{
  background:#16171a!important;color:#ffffff!important;font-family:Montserrat,sans-serif!important;
  box-shadow:0 2px 10px rgba(22,23,26,.14)!important}
html body #ppi-optin-slot #submit-button-f3dae246:hover{background:#000000!important}
html body #submit-button-f3dae246 div{color:#ffffff!important;font-family:Montserrat,sans-serif!important}
html body #ppi-lp img[src*="logo-ppi-"]{object-fit:contain!important}
/* compte a rebours : Montserrat est plus large que l'ancienne police, les libelles se chevauchaient */
html body #ppi-lp #ppi-countdown{width:268px!important;max-width:100%!important;justify-content:space-between!important}
html body #ppi-lp .ppi-cd-l{font-size:12px!important;letter-spacing:.04em!important}
html body #ppi-lp .ppi-cd-n{font-size:20px!important}
/* compte a rebours : libelles trop pales (contraste insuffisant, audit Lighthouse du 15/09) */
html body #ppi-lp .ppi-cd-l{color:#4a4b50!important}
html body #ppi-lp #ppi-cta-final .ppi-btn .ppi-dim{color:rgba(22,23,26,.78)!important}
/* badge « Realise avec systeme.io » en bas de page : retire des pages de campagne */
html body #app>a[href*="systeme.io/?sa="]{display:none!important}
/* pictos des benefices : six pictos nus etires a 47 px et deux dessines avec leur carre jaune.
   Tous prennent le meme carre, picto centre a la meme taille. */
html body #ppi-lp .ppi-benef .ppi-ico{width:48px!important;height:48px!important;flex:none!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border-radius:10px!important;background:rgba(255,253,84,.4)!important}
html body #ppi-lp .ppi-benef .ppi-ico img{width:26px!important;height:26px!important;object-fit:contain!important;display:block!important}
html body #ppi-lp .ppi-benef .ppi-ico:has(img[src*="7f465337ac16"]),
html body #ppi-lp .ppi-benef .ppi-ico:has(img[src*="339c5d724aba"]){background:transparent!important}
html body #ppi-lp .ppi-benef .ppi-ico img[src*="7f465337ac16"],
html body #ppi-lp .ppi-benef .ppi-ico img[src*="339c5d724aba"]{width:48px!important;height:48px!important}
/* la section systeme.io qui porte la page ajoute 5 px sur ses quatre cotes : sur telephone,
   la page ne touchait pas les bords et une bande blanche coiffait le hero */
html body section:has(#ppi-lp){padding:0!important}
/* bande photos : le generateur du bloc prefixait les etapes du @keyframes (« #ppi-lp from »),
   l'animation etait vide et la bande restait immobile (audit du 16/09). Le bloc colle dans
   systeme.io garde cette regle vide, placee apres cette feuille dans la page : une animation
   au nom neuf la remplace, sauf pour qui demande moins d'animations. */
@keyframes ppiDefileBande{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:no-preference){
  html body #ppi-lp #ppi-bande .ppi-bande-track{animation-name:ppiDefileBande!important}
}
/* ---- pleine largeur au-dela de 1440 px ----
   La page est un canevas de 1440 px centre : sur un grand ecran, ses bandes de fond
   s'arretaient net et la page ressemblait a un encart. Les bandes vont maintenant
   d'un bord a l'autre, le contenu reste sur 1440 px, comme la page de vente. */
@media (min-width:1441px){
  html body #ppi-lp #ppi-bg-hero,html body #ppi-lp #ppi-bg-dark-1,html body #ppi-lp #ppi-bg-dark-2,
  html body #ppi-lp #ppi-bg-dark-3,html body #ppi-lp #ppi-bande{left:calc(720px - 50vw)!important;width:100vw!important}
  html body #ppi-lp #ppi-bg-hero,html body #ppi-lp #ppi-bg-dark-1,html body #ppi-lp #ppi-bg-dark-2{border-radius:0!important}
  html body #ppi-lp #ppi-bg-hero img{object-position:50% 30%!important}
  html body #ppi-lp #ppi-logos,html body #ppi-lp #ppi-temoignages{box-shadow:0 0 0 100vmax #16171a!important;clip-path:inset(0 -100vmax)!important}
}