/*
Theme Name: Passerelle Pro
Theme URI: https://passerelle-pro.fr
Author: Educform31
Description: Site vitrine Passerelle Pro : un espace en ligne par établissement, avec les modules choisis sur devis (Convention, Évaluation, Entreprises et taxe, Gestion), page Mon espace pour se connecter, démonstration en libre accès, sur mesure et formation des équipes. Thème sur mesure, léger, sans constructeur de pages, polices auto-hébergées.
Version: 1.6.3
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: passerelle-pro
*/

:root{--navy:#0F2A44;--navy2:#163a5c;--mint:#2EC4A6;--cream:#F7F5F0;--coral:#FF7A59;--coral-h:#f0663f;--green:#1F7A6B;--slate:#3d4f63;--slateblue:#4A6FA5;--slate2:#4f6275;--line:#e6e2d9;--light:#c9d3de;--mintbg:#e8f7f3;--shadow:0 6px 24px rgba(15,42,68,.06);--shadow-h:0 18px 40px rgba(15,42,68,.10);--r:16px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--navy);background:var(--cream);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--green)}
h1,h2,h3,p,ul,figure{margin:0}
h1,h2,h3,.sora{font-family:Sora,Inter,sans-serif}
img,svg{max-width:100%;height:auto}
input,textarea,select,button{font:inherit}
[id]{scroll-margin-top:96px}
.screen-reader-text,.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:8px;background:var(--navy);color:#fff;padding:10px 14px;border-radius:12px;z-index:100}
.skip-link:focus{left:8px;color:#fff}
.pp-wrap{min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
.container{max-width:1280px;margin:0 auto;padding-left:40px;padding-right:40px;width:100%}
.section{padding:88px 0}
.section-hero{padding:72px 0 56px}
.section-tight{padding:64px 0}
.band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-navy{background:var(--navy);color:#fff}
.band-navy a{color:#fff}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin-bottom:14px}
.band-navy .eyebrow,.plan-navy .eyebrow{color:var(--mint)}
h1,.h1{font-size:52px;font-weight:800;line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
.h2{font-size:36px;font-weight:700;line-height:1.12;letter-spacing:-.025em}
.h3{font-size:24px;font-weight:700;letter-spacing:-.02em}
.lead{font-size:18px;line-height:1.6;color:var(--slate);margin-top:22px;max-width:560px}
.lead-wide{max-width:680px}
.band-navy .lead{color:var(--light)}
.muted{color:var(--slate)}
.center{text-align:center}
.intro{max-width:680px;margin:0 auto 48px;text-align:center}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.gap16{gap:16px}
.split{grid-template-columns:0.9fr 1.1fr;gap:56px;align-items:center}
.split-wide{grid-template-columns:0.8fr 1.2fr}
.split-start{align-items:start}
.card{background:#fff;border-radius:var(--r);padding:36px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px;color:var(--navy)}
.card p{font-size:16px;line-height:1.6;color:var(--slate)}
.card p.grow{flex:1}
.card-cream{background:var(--cream);box-shadow:none;padding:32px;gap:12px}
.card-cream p{font-size:15.5px}
.lift{transition:transform .22s cubic-bezier(.23,1,.32,1),box-shadow .22s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.lift:hover{transform:translateY(-4px);box-shadow:var(--shadow-h);color:var(--navy)}}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r);padding:16px 28px;font-size:16px;font-weight:600;border:0;cursor:pointer;transition:background .2s ease-out,color .2s ease-out,transform .14s cubic-bezier(.23,1,.32,1);white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--coral);color:#fff}
.btn-primary:hover{background:var(--coral-h);color:#fff}
.btn-primary:disabled{background:#ffb59f;cursor:wait}
.btn-secondary{border:1.5px solid var(--navy);color:var(--navy);padding:16px 26px;background:transparent}
.btn-secondary:hover{background:var(--navy);color:#fff}
.btn-light{border:1.5px solid #fff;color:#fff;background:transparent}
.btn-light:hover{background:#fff;color:var(--navy)}
.btn-sm{padding:12px 20px;font-size:15px;border-radius:12px}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.link-more{color:var(--green);font-weight:600}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--mintbg);color:var(--green);padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;margin-bottom:20px}
.tag{background:var(--cream);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600}
.icon-box{width:52px;height:52px;border-radius:14px;background:var(--navy);display:flex;align-items:center;justify-content:center;flex:none}
.check{width:20px;height:20px;border-radius:50%;background:var(--mint);color:var(--navy);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none;margin-top:2px}
.check-sq{width:28px;height:28px;border-radius:8px;background:var(--mintbg);color:var(--green);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.list-check{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.list-check li{display:flex;gap:10px;font-size:15px;line-height:1.5}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .62s cubic-bezier(.23,1,.32,1),transform .62s cubic-bezier(.23,1,.32,1)}
/* cascade des cartes d'une grille révélée (classes posées puis retirées par main.js : le survol reste libre ensuite) */
.rv{opacity:0;transform:translateY(10px)}
.rv.rv-in{opacity:1;transform:none;transition:opacity .52s cubic-bezier(.23,1,.32,1),transform .52s cubic-bezier(.23,1,.32,1)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* En-tête */
.pp-header{position:sticky;top:0;z-index:50;background:rgba(247,245,240,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.admin-bar .pp-header{top:32px}
.pp-header .container{height:76px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand-name{font-family:Sora,Inter,sans-serif;font-size:22px;font-weight:700;letter-spacing:-.02em}
.brand-name span{color:var(--mint)}
/* 03/10/2026 : « une solution EducForm31 » (logo et couleurs du site educform31.fr) */
.brand-txt{display:flex;flex-direction:column;line-height:1.05}
.brand-sub{font-family:Manrope,Inter,Arial,sans-serif;font-size:11px;font-weight:600;color:var(--slate);letter-spacing:0;margin-top:3px}
.brand-sub b{font-weight:800;color:inherit;letter-spacing:-.02em}.brand-sub b span{color:#f97316}
.pp-solution{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;background:#040c16;color:#c6dce9;font:600 12px Manrope,Inter,Arial,sans-serif;text-decoration:none;vertical-align:middle}
.pp-solution{cursor:default}.pp-solution b{font-weight:800;color:#eff8ff;letter-spacing:-.02em}.pp-solution b span{color:#ffac76}
.foot-solution{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.foot-protection{margin:10px 0 0;font-size:11px;line-height:1.5;opacity:.75}
.navlinks{margin-left:auto;display:flex;align-items:center;gap:26px;font-size:15px;font-weight:500}
.navlinks a,.navlinks button{white-space:nowrap}
.navlinks a.current{font-weight:700}
.dd{position:relative}
.dd-btn{background:none;border:0;color:var(--navy);cursor:pointer;display:flex;align-items:center;gap:6px;padding:8px 0;font-weight:500}
.dd-menu{position:absolute;top:100%;left:-16px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 40px rgba(15,42,68,.12);padding:10px;min-width:300px;display:none;flex-direction:column;gap:2px}
.dd.open .dd-menu{display:flex}
.dd-item{display:flex;gap:12px;padding:10px 12px;border-radius:10px}
.dd-item:hover,.dd-item:focus{background:var(--cream);color:var(--navy)}
.dd-ico{width:36px;height:36px;border-radius:10px;background:var(--mintbg);color:var(--green);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.dd-ico.small{font-size:11px}
.dd-item strong{display:block;font-size:14.5px}
.dd-item small{font-size:13px;color:var(--slate2)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:12px;align-items:center;justify-content:center;cursor:pointer;flex:none;padding:0}
.mobile-nav{display:none;background:#fff;border-top:1px solid var(--line);padding:12px 20px 20px;flex-direction:column;gap:4px;font-size:16px;font-weight:500}
.mobile-nav.open{display:flex}
.mobile-nav a{padding:12px 8px;border-radius:10px}
.mobile-nav a.sub{padding-left:28px;color:var(--slate2)}

/* Accueil */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hero-eval{grid-template-columns:1.1fr 0.9fr}
.hero-3d{height:460px;border-radius:24px;background:linear-gradient(135deg,#eef3f8,#f7f5f0);box-shadow:0 24px 60px rgba(15,42,68,.10);overflow:hidden}
.trust{padding:18px 0;display:flex;justify-content:center;gap:12px 36px;flex-wrap:wrap;font-size:14px;font-weight:500;color:var(--slate)}
.trust span{display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--mint);flex:none}
.vignette{background:var(--cream);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:12px}
.vignette strong{font-size:14.5px}
.vignette span{font-size:13.5px;color:var(--slate);line-height:1.45}
.steps{position:relative}
.frise{position:absolute;left:16%;right:16%;top:34px;width:68%;height:20px}
.frise path{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.2s ease-out .2s}
.in .frise path{stroke-dashoffset:0}
.step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.step-n{width:68px;height:68px;border-radius:50%;background:var(--navy);color:var(--mint);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;font-family:Sora,Inter,sans-serif}
.step h3{font-size:20px;font-weight:700}
.step p{font-size:15.5px;line-height:1.55;color:var(--slate);max-width:320px}
.stats{padding:72px 0;gap:32px}
.stat-n{font-family:Sora,Inter,sans-serif;font-size:48px;font-weight:800;letter-spacing:-.03em;color:var(--mint)}
.stat-l{font-size:15px;color:var(--light);line-height:1.5}
.sec-card{background:#fff;border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.sec-card strong{display:block;margin-bottom:6px}
.sec-card span{font-size:14.5px;color:var(--slate);line-height:1.5}
.quote{max-width:820px;margin:0 auto;padding:72px 40px;text-align:center}
.quote p{font-size:24px;font-weight:600;line-height:1.4;letter-spacing:-.01em}
.quote .who{margin-top:18px;font-size:15px;color:var(--slate)}
.plan{gap:14px}
.plan h3{font-size:26px;font-weight:700;letter-spacing:-.02em}
.plan .list-check{margin-top:6px;flex:1}
.plan .btn{margin-top:8px}
.plan-navy{background:var(--navy);color:#fff}
.plan-navy .btn-secondary{border-color:#fff;color:#fff}
.plan-navy .btn-secondary:hover{background:#fff;color:var(--navy)}
.note{text-align:center;font-size:14.5px;color:var(--slate);margin-top:24px}
.ressources{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}

/* Téléphones de la suite (accueil) */
.suite{background:var(--navy);color:#fff;overflow:hidden}
.suite .intro{margin-bottom:56px}
.suite .h2{color:#fff}
.suite .lead{color:var(--light);margin:14px auto 0;max-width:640px}
.phones{display:flex;justify-content:center;align-items:flex-end;gap:28px;perspective:1600px;padding:10px 0 20px}
.phone-item{display:flex;flex-direction:column;align-items:center;gap:18px;flex:none;width:232px}
.tphone{position:relative;width:212px;height:438px;transform:rotateY(-16deg) rotateX(4deg);transform-style:preserve-3d;transition:transform .5s ease-out}
.phone-item:nth-child(even) .tphone{transform:rotateY(16deg) rotateX(4deg)}
.phone-item:hover .tphone,.phone-item:focus-within .tphone{transform:rotateY(0) rotateX(0) translateY(-6px)}
.tphone-body{position:absolute;inset:0;border-radius:32px;background:#0b1a29;box-shadow:0 30px 60px rgba(0,0,0,.45),inset 0 0 0 2px #2a3f55}
.tphone-screen{position:absolute;inset:9px;border-radius:25px;overflow:hidden;background:#fff;color:var(--navy)}
.tphone-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.tphone-notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:76px;height:18px;border-radius:10px;background:#0b1a29;z-index:2}
.tphone-badge{position:absolute;right:-18px;top:54%;background:#fff;color:var(--navy);border-radius:10px;padding:8px 12px;box-shadow:0 12px 30px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:2px;min-width:120px;z-index:3;transform:translateZ(40px)}
.tphone-badge small{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.tphone-badge strong{font-size:13.5px;font-weight:600}
.phone-cap{text-align:center}
.phone-cap strong{display:block;font-family:Sora,Inter,sans-serif;font-size:16px;color:#fff}
.phone-cap span{font-size:13.5px;color:var(--light);line-height:1.45;display:block;margin-top:4px}
/* écrans dessinés en CSS */
.scr{position:absolute;inset:0;display:flex;flex-direction:column;font-size:9.5px;line-height:1.35}
.scr-top{background:var(--navy);color:#fff;padding:30px 12px 10px;font-weight:700;font-size:11px;display:flex;justify-content:space-between;align-items:center}
.scr-top span{font-weight:500;opacity:.8;font-size:9px}
.scr-body{padding:10px;display:flex;flex-direction:column;gap:7px;flex:1;background:#f7f9fb}
.scr-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px}
.scr-card b{display:block;font-size:10px;margin-bottom:5px}
.scr-lv{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.scr-lv i{height:16px;border-radius:5px;background:#fff;border:1px solid var(--line)}
.scr-lv i.on{background:var(--mint);border-color:var(--mint)}
.scr-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:9.5px}
.scr-row:last-child{border-bottom:0}
.scr-ok{width:14px;height:14px;border-radius:50%;background:var(--mint);color:var(--navy);font-size:8px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.scr-abs{width:14px;height:14px;border-radius:50%;background:#ffd9cf;color:#b3361d;font-size:8px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.scr-tag{background:var(--mintbg);color:var(--green);border-radius:999px;padding:2px 6px;font-size:8px;font-weight:700}
.scr-btn{margin-top:auto;background:var(--coral);color:#fff;border-radius:8px;padding:8px;text-align:center;font-weight:600;font-size:10px}
.scr-line{height:6px;border-radius:3px;background:#e6ebf0}
.scr-line.w60{width:60%}.scr-line.w80{width:80%}
@media (max-width:1180px){.phones{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 20px 24px;gap:22px;-webkit-overflow-scrolling:touch}.phone-item{scroll-snap-align:center}.tphone,.phone-item:nth-child(even) .tphone{transform:rotateY(0) rotateX(0)}.tphone-badge{right:-8px}}
@media (prefers-reduced-motion: reduce){.tphone{transition:none}.phone-item:hover .tphone{transform:none}}

/* Éval */
.phone-wrap{display:flex;justify-content:center}
.phone{width:300px;background:var(--navy);border-radius:40px;padding:14px;box-shadow:0 30px 60px rgba(15,42,68,.22)}
.phone-screen{background:#fff;border-radius:28px;padding:22px 18px;display:flex;flex-direction:column;gap:14px;min-height:560px;font-size:13px}
.phone-top{display:flex;justify-content:space-between;align-items:center}
.phone-top .brand-name{font-size:15px}
.phone-meta{font-size:12px;color:var(--slate)}
.comp{border:1px solid var(--line);border-radius:12px;padding:12px}
.comp strong{display:block;font-size:13px;margin-bottom:8px}
.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.lvl{height:30px;border-radius:8px;background:#fff;border:1px solid var(--line)}
.lvl.on{background:var(--mint)}
.comment{border:1px solid var(--line);border-radius:12px;padding:12px;font-size:12.5px;color:var(--slate);min-height:56px}
.phone-btn{margin-top:auto;background:var(--coral);color:#fff;border-radius:12px;padding:14px;text-align:center;font-weight:600;font-size:14px}
.feature{flex-direction:row;padding:24px;gap:14px;align-items:flex-start}
.feature span:last-child{font-size:15.5px;line-height:1.5}
.before{border:1.5px dashed var(--light);border-radius:var(--r);padding:36px}
.after{background:var(--navy);color:#fff;border-radius:var(--r);padding:36px}
.before ul,.after ul{margin:16px 0 0;padding-left:18px;font-size:15px;line-height:1.7}
.before ul{color:var(--slate)}
.after ul{color:var(--light)}
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{background:#fff;border-radius:var(--r);padding:20px 24px;box-shadow:var(--shadow)}
.faq summary{font-weight:600;font-size:16.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--green);font-weight:700;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin-top:12px;font-size:15.5px;line-height:1.6;color:var(--slate)}

/* Formation */
.prog-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.prog h2{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.prog .acquis{border-top:1px solid var(--line);padding-top:16px}
.prog .acquis-h{font-size:13px;font-weight:600;color:var(--slate);margin-bottom:8px}
.modalites{background:var(--cream);border-radius:var(--r);padding:32px;display:grid;gap:18px;font-size:15px;line-height:1.55}
.modalites span{color:var(--slate)}

/* Démo */
.demo .container{padding-top:88px;padding-bottom:88px}
.demo form{background:#fff;color:var(--navy);border-radius:var(--r);padding:32px;display:flex;flex-direction:column;gap:14px;position:relative}
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.field input,.field textarea{border:1.5px solid var(--light);border-radius:var(--r);padding:14px 16px;font-size:15px;background:#fff;width:100%;color:var(--navy)}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px rgba(46,196,166,.25)}
.form-status{border-radius:12px;padding:14px 16px;font-weight:600;display:none}
.form-status.ok{display:block;background:var(--mintbg);color:var(--green)}
.form-status.err{display:block;background:#fdecea;color:#b3361d}
.form-note{font-size:12.5px;color:var(--slate);line-height:1.5}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}


/* Modules de la suite (accueil) */
.modules{gap:20px}
.module{gap:14px}
.module .icon-box{color:#fff}
.module-tag{font-family:Sora,Inter,sans-serif;font-weight:600;font-size:16.5px;line-height:1.35;color:var(--navy)}
.module .btn{align-self:flex-start;margin-top:4px}
.acc-navy .icon-box,.dd-ico.acc-navy{background:var(--navy);color:#fff}
.acc-mint .icon-box,.dd-ico.acc-mint{background:var(--mint);color:var(--navy)}
.acc-coral .icon-box,.dd-ico.acc-coral{background:var(--coral);color:#fff}
.acc-slate .icon-box,.dd-ico.acc-slate{background:var(--slateblue);color:#fff}
.module.acc-navy{border-top:4px solid var(--navy)}
.module.acc-mint{border-top:4px solid var(--mint)}
.module.acc-coral{border-top:4px solid var(--coral)}
.module.acc-slate{border-top:4px solid var(--slateblue)}
.module-page.acc-coral .pill{background:#ffe9e2;color:#b3361d}
.module-page.acc-slate .pill{background:#e6edf7;color:#3a5a8a}
.module-page.acc-navy .pill{background:#e3e9f0;color:var(--navy)}
.dd-ico svg{width:18px;height:18px}
.stat-n.stat-text{font-size:34px;line-height:1.15;padding-top:8px}
.pilot{display:inline-block;margin-top:14px;font-size:13.5px;color:var(--slate);border:1px dashed var(--light);border-radius:999px;padding:5px 12px}
.pres-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:12px}
.pres-row:last-child{border-bottom:0}
.scr-ok{width:16px;height:16px;border-radius:50%;background:var(--mint);color:var(--navy);font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.scr-abs{width:16px;height:16px;border-radius:50%;background:#ffd9cf;color:#b3361d;font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.scr-tag{display:inline-block;background:var(--mintbg);color:var(--green);border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700}
.tphone-hero{margin:0 auto}
.captures{align-items:start}
.capture{display:flex;flex-direction:column;align-items:center;gap:16px;margin:0}
.capture .tphone{transform:none}
.capture figcaption{font-size:14.5px;color:var(--slate);text-align:center;max-width:260px;line-height:1.45}
.capture-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:repeating-linear-gradient(45deg,#f7f9fb,#f7f9fb 10px,#eef2f6 10px,#eef2f6 20px);color:var(--slate);text-align:center;padding:20px;font-size:14px;font-weight:600}
.capture-placeholder small{font-weight:400;font-size:12px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--slate);font-weight:400}
.consent input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--green)}
.consent a{color:var(--green);text-decoration:underline}
.field select{border:1.5px solid var(--light);border-radius:var(--r);padding:14px 16px;font-size:15px;background:#fff;width:100%;color:var(--navy)}
.field select:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px rgba(46,196,166,.25)}
.g4 .step h3{font-size:18px}
@media (max-width:1180px){.modules{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.modules{grid-template-columns:1fr}.captures{grid-template-columns:1fr}}

/* Pied de page */
.pp-footer{background:#fff;border-top:1px solid var(--line);font-size:14.5px}
.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding:56px 0 32px}
.foot-col{display:flex;flex-direction:column;gap:10px}
.foot-h{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.foot-h.mt{margin-top:10px}
.foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.foot-brand .brand-name{font-size:19px}
.foot-bottom{padding:20px 0 28px;font-size:13px;color:var(--slate);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Pages de contenu (mentions, confidentialité…) */
.entry{max-width:820px;padding:72px 0 88px}
.entry h1{font-size:44px}
.entry-content{margin-top:28px;font-size:16px;line-height:1.7;color:var(--slate)}
.entry-content h2{font-size:24px;margin:32px 0 10px;color:var(--navy)}
.entry-content h3{font-size:18px;margin:24px 0 8px;color:var(--navy)}
.entry-content p,.entry-content ul{margin:0 0 14px}
.entry-content a{color:var(--green);text-decoration:underline}
.alignwide,.alignfull{max-width:100%}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.lift{transition:none}.lift:hover{transform:none}.frise path{stroke-dashoffset:0;transition:none}.btn{transition:none}}
@media (max-width:1180px){.navlinks{display:none}.burger{display:flex}}
@media (max-width:900px){.g2,.g3,.g4,.hero,.hero-eval,.split,.split-wide,.foot-grid{grid-template-columns:1fr}.split{gap:32px}h1,.h1{font-size:34px}.h2{font-size:28px}.container{padding-left:20px;padding-right:20px}.hide-m{display:none}.hero-3d{height:300px}.section{padding:56px 0}.section-hero{padding:48px 0 40px}.demo .container{padding-top:56px;padding-bottom:56px}.entry h1{font-size:34px}.quote{padding:56px 20px}.quote p{font-size:20px}.stat-n{font-size:40px}.card{padding:28px}}
@media (max-width:782px){.admin-bar .pp-header{top:46px}}
@media (max-width:600px){.btn{white-space:normal;text-align:center}.admin-bar .pp-header{top:0}.pp-header .container{gap:12px;height:68px}.cta-group{display:none}.brand-name{font-size:20px}.mobile-nav .btn{margin-top:8px;align-self:flex-start}}

/* v1.3.0 : démo, sécurité, mise en service, tarifs */
.cta-group{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.navlinks + .cta-group{margin-left:0}
.cta-head{padding:12px 18px;border-radius:12px;font-size:14.5px}
.cta-ask{padding:11px 16px;font-size:14px}
.hero-more{margin-top:20px;font-size:15px;color:var(--slate);line-height:1.5}
/* la page en mouvement, visible dès l'accueil (1.4.6) */
.hero-more .link-more{white-space:nowrap}
.voir-mouvement{margin-top:14px}
.voir-mouvement a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 16px 6px 8px;border-radius:999px;background:#fff;color:var(--navy);font-weight:600;font-size:15px;box-shadow:0 1px 2px rgba(15,42,68,.08),0 6px 18px rgba(15,42,68,.08);transition:transform .14s cubic-bezier(.23,1,.32,1),box-shadow .2s ease-out}
.voir-mouvement a svg{color:var(--green);flex:none}
.voir-mouvement a:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.voir-mouvement a:hover{box-shadow:0 2px 4px rgba(15,42,68,.1),0 12px 26px rgba(15,42,68,.12);color:var(--navy)}}
@property --trait{syntax:'<percentage>';inherits:true;initial-value:50%}
.duo-apercu{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:128px 0 104px;--trait:50%}
.duo-apercu__pp{position:absolute;top:0;bottom:0;left:38%;right:0;background:linear-gradient(270deg,rgba(15,42,68,.95) 0%,rgba(15,42,68,.84) 34%,rgba(15,42,68,.3) 70%,rgba(15,42,68,.5) 100%),var(--img-pp) 30% 14%/cover}
.duo-apercu__fond{position:absolute;inset:0;pointer-events:none}
.duo-apercu__papier{position:absolute;inset:0;right:40%;background:linear-gradient(90deg,rgba(232,235,239,.97) 0%,rgba(232,235,239,.9) 32%,rgba(232,235,239,.25) 72%,rgba(232,235,239,.1) 100%),var(--img-papier) 70% 40%/cover,#E4E8EC;clip-path:inset(0 calc(100% - var(--trait) / .6) 0 0)}
.duo-apercu__trait{position:absolute;top:0;bottom:0;left:var(--trait);width:2px;margin-left:-1px;background:var(--mint)}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:1101px){
    .duo-apercu{animation:duo-bascule linear both;animation-timeline:view();animation-range:entry 20% exit 40%}
    @keyframes duo-bascule{from{--trait:56%}to{--trait:45%}}
  }
}
.duo-apercu__grille{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0 96px}
.duo-apercu__cote{font-family:Sora,Inter,sans-serif;font-size:26px;font-weight:700;line-height:1.2;letter-spacing:-.02em;max-width:400px;text-wrap:balance}
.duo-apercu__cote--papier{color:var(--navy)}
.duo-apercu__cote--pp{justify-self:end;color:#fff}
.duo-apercu__et{display:block;margin-bottom:12px;font-family:Inter,system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.duo-apercu__cote--papier .duo-apercu__et{color:var(--slate)}
.duo-apercu__cote--pp .duo-apercu__et{color:var(--light)}
.duo-apercu__action{position:relative;display:flex;justify-content:center;margin-top:40px}
@media (max-width:760px){
  .duo-apercu{padding:0;animation:none}
  .duo-apercu__fond{display:none}
  .duo-apercu__grille{grid-template-columns:1fr;gap:0}
  .duo-apercu__cote{font-size:21px;padding:30px 0;max-width:none}
  .duo-apercu__cote{position:relative;isolation:isolate}
  .duo-apercu__cote::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1}
  .duo-apercu__cote--papier::before{background:linear-gradient(90deg,rgba(232,235,239,.95) 0%,rgba(232,235,239,.82) 55%,rgba(232,235,239,.45) 100%),var(--img-papier) 70% 40%/cover}
  .duo-apercu__cote--pp::before{background:linear-gradient(90deg,rgba(15,42,68,.94) 0%,rgba(15,42,68,.8) 55%,rgba(15,42,68,.5) 100%),var(--img-pp) 40% 25%/cover}
  .duo-apercu__cote{padding:40px 0}
  .duo-apercu__action{padding-top:8px}
  .duo-apercu__cote--pp{justify-self:start}
  .duo-apercu__action{margin:0;padding-bottom:32px;justify-content:flex-start}
}
.hint{margin-top:16px;font-size:14px;color:var(--slate)}
.module-links{font-size:13.5px;display:flex;gap:8px;flex-wrap:wrap;color:var(--slate2);margin-top:2px}
.module-links a{color:var(--green);font-weight:600}
.suite-links{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:40px}
.also{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.how{gap:10px;padding:28px 26px}
.how-n{width:36px;height:36px;border-radius:10px;background:var(--navy);color:var(--mint);font-family:Sora,Inter,sans-serif;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.how strong{font-family:Sora,Inter,sans-serif;font-size:16.5px;line-height:1.3}
.how p{font-size:15px}
.steps-6{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 24px}
.video-wrap{position:relative;aspect-ratio:16/9;background:#0b1a29;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-h)}
.video-wrap video,.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.creds{background:#fff;color:var(--navy);border-radius:var(--r);padding:32px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-h)}
.creds-row{display:flex;flex-direction:column;gap:5px}
.creds-row span{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.creds-row code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15.5px;background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:10px 12px;word-break:break-all}
.creds .btn{align-self:flex-start;margin-top:6px}
.creds-note{font-size:13px;color:var(--slate);line-height:1.5}
.kv-k{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.card-navy{background:var(--navy);color:#fff}
.card-navy .eyebrow{color:var(--mint)}
.card-navy .h3{color:#fff}
.card-navy .list-check li{color:var(--light)}
.card-navy .list-check strong{color:#fff}
.price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price strong{font-family:Sora,Inter,sans-serif;font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
.price span{font-size:14px;color:var(--slate)}
.plan-navy .price strong{color:var(--mint)}
.plan-navy .price span{color:var(--light)}
.plan-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.tag-mint{background:var(--mint);color:var(--navy)}
.tarif-h{max-width:720px;margin:48px 0 20px}
.tarif-h p{margin-top:6px;font-size:15.5px;line-height:1.55}
.tarif-cta{text-align:center;margin-top:44px}
.option{gap:8px;padding:26px}
.option strong{font-family:Sora,Inter,sans-serif;font-size:16px;line-height:1.3}
.option span{font-size:14.5px;color:var(--slate);line-height:1.5}
.option .price{margin-top:auto;padding-top:6px}
.option .price strong{font-size:20px}
@media (max-width:1180px){.cta-group{margin-left:auto}}
@media (max-width:900px){.steps-6{grid-template-columns:1fr;gap:32px}.creds{padding:24px}.tarif-h{margin-top:36px}}

/* Page Essayer la démonstration : galerie (29/09/2026) */
.galerie-item{margin:0;padding:0;overflow:hidden}
.galerie-item img{display:block;width:100%;height:auto;border-bottom:1px solid var(--light)}
.galerie-item figcaption{display:flex;flex-direction:column;gap:6px;padding:16px 18px;font-size:15px;line-height:1.5;color:var(--slate)}
.galerie-item figcaption strong{color:var(--navy);font-size:17px}
.galerie-formation{margin-top:16px;display:grid;grid-template-columns:1.1fr 1fr;align-items:center}
.galerie-formation img{border-bottom:0;border-right:1px solid var(--light)}
@media (max-width:760px){.galerie-formation{grid-template-columns:1fr}.galerie-formation img{border-right:0;border-bottom:1px solid var(--light)}}

/* En-tête sur téléphone (29/09/2026) : la règle de 600 px était écrasée par .cta-group{display:flex} placée plus bas ;
   les deux boutons restent dans le menu mobile. */
@media (max-width:760px){.cta-group{display:none}}

/* 1.5.1 (04/10/2026) : sur-titre du haut de l'accueil, tapé à l'arrivée (motion/pp-motion.*) ; la marge du haut
   est réduite d'autant pour que les badges de confiance restent dans le premier écran. */
.home .section-hero{padding-top:40px}


/* ===================================================================================================
   1.6.0 (27/10/2026) : menu « Modules » (Lycées et CFA / Organismes et formateurs), bouton « Mon espace »,
   section « Pour qui », module Gestion, page Mon espace, et micro-interactions sobres (survols, menu qui
   s'ouvre, en-tête qui se pose au défilement). Tout ce qui bouge est sous prefers-reduced-motion: no-preference.
   =================================================================================================== */
:root{--e-out:cubic-bezier(.23,1,.32,1)}

/* ---- en-tête ---- */
.pp-header{transition:box-shadow .3s ease-out,background-color .3s ease-out}
.pp-header.defile{background:rgba(247,245,240,.97);box-shadow:0 8px 28px rgba(15,42,68,.08)}
.navlinks>a,.dd-btn{position:relative}
.navlinks>a::after,.dd-btn::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:var(--mint);transform:scaleX(0);transform-origin:left center}
.navlinks>a.current::after,.dd.open .dd-btn::after{transform:scaleX(1)}
.dd-btn svg{transition:transform .2s var(--e-out)}
.dd.open .dd-btn svg{transform:rotate(180deg)}
.dd-menu{display:flex;visibility:hidden;opacity:0;pointer-events:none;min-width:340px}
.dd.open .dd-menu{visibility:visible;opacity:1;pointer-events:auto}
.dd-h{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate2);padding:10px 12px 4px}
.dd-h~.dd-h{border-top:1px solid var(--line);margin-top:6px;padding-top:14px}
.dd-pied{margin-top:6px;border-top:1px solid var(--line);padding:12px 12px 4px;font-size:14px;font-weight:600;color:var(--green)}
.btn-espace{display:inline-flex;align-items:center;gap:8px;padding:11px 15px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--navy);font-size:14.5px;font-weight:600;white-space:nowrap}
.btn-espace svg{color:var(--green);flex:none}
.btn-espace:hover,.btn-espace[aria-current]{border-color:var(--mint);color:var(--navy)}
.espace-mini{display:none}
.burger path{transform-box:fill-box;transform-origin:center}
.mob-h{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate2);padding:10px 8px 2px}
.mobile-nav a.sub small{display:block;font-size:12.5px;font-weight:400;color:var(--slate2)}
.mobile-nav .mob-espace{margin:4px 0 6px}
@media (max-width:760px){.espace-mini{display:inline-flex;margin-left:auto;padding:10px 12px}.espace-mini+.burger{margin-left:0}}
@media (max-width:480px){.espace-mini span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}.espace-mini{padding:12px}}
.burger[aria-expanded="true"] .b1{transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] .b2{opacity:0}
.burger[aria-expanded="true"] .b3{transform:translateY(-5px) rotate(-45deg)}

/* ---- modules et « Pour qui » ---- */
.module-pour{font-size:13px;font-weight:600;color:var(--slate2);margin-top:-6px}
.parties,.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.parties li{font-size:12.5px;font-weight:600;background:#e6edf7;color:#3a5a8a;border-radius:999px;padding:4px 10px}
.profil{gap:12px}
.profil .h3{font-size:21px}
.profil p{flex:1}
.chips a{display:inline-block;font-size:13px;font-weight:600;border-radius:999px;padding:5px 11px;background:var(--mintbg);color:var(--green)}
.chips .chip-gestion a{background:#e6edf7;color:#3a5a8a}
.chips a:hover{background:var(--navy);color:#fff}
@media (max-width:1180px){.profils{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.profils{grid-template-columns:1fr}}
.foot-col a.foot-sub{padding-left:12px;font-size:13.5px;color:var(--slate)}

/* ---- page Gestion : schéma des quatre parties ---- */
.gestion-visuel{width:100%;max-width:400px;background:#fff;border-radius:22px;box-shadow:0 24px 60px rgba(15,42,68,.12);padding:22px;display:flex;flex-direction:column;gap:10px}
.gv-tete{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.gv-ico{grid-row:1/3;width:44px;height:44px;border-radius:12px;background:var(--slateblue);color:#fff;display:flex;align-items:center;justify-content:center}
.gv-tete strong{font-family:Sora,Inter,sans-serif;font-size:19px}
.gv-tete small{font-size:13px;color:var(--slate2)}
.gv-ligne{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:var(--cream);border-radius:12px;padding:13px 14px;font-size:15px}
.gv-pt{width:12px;height:12px;border-radius:50%;background:var(--navy)}
.gv-formation{background:var(--mint)}.gv-centre{background:var(--coral)}.gv-qualite{background:var(--slateblue)}
.gv-ok{width:22px;height:22px;border-radius:50%;background:var(--mint);color:var(--navy);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.gv-pied{font-size:13px;color:var(--slate2);text-align:center;padding-top:4px}

/* ---- page Mon espace ---- */
.espace-grille{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.espace-carte{background:#fff;border-radius:22px;box-shadow:0 24px 60px rgba(15,42,68,.10);padding:32px;display:flex;flex-direction:column;gap:16px}
.espace-form{display:flex;flex-direction:column;gap:14px}
.espace-form .btn{align-self:flex-start;gap:10px}
.espace-resultat{display:flex;flex-direction:column;gap:10px;font-size:15px}
.espaces{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.espaces.grid{display:grid}
.espace-lien{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;font-weight:600;color:var(--navy)}
.espace-resultat .espace-lien{background:var(--cream)}
.espace-lien small{display:block;font-weight:400;font-size:13px;color:var(--slate2)}
.espace-lien:hover{border-color:var(--mint);color:var(--navy)}
.espace-lien .fleche{color:var(--green);font-weight:700}
@media (max-width:900px){.espace-grille{grid-template-columns:1fr;gap:28px}.mon-espace h1{font-size:34px!important}.espace-carte{padding:24px}}

/* ---- focus clavier bien visible ---- */
:is(a,button,summary,input,select,textarea):focus-visible{outline:3px solid rgba(46,196,166,.55);outline-offset:2px;border-radius:10px}

/* ---- micro-interactions (rien ne bouge en mouvements réduits) ---- */
@media (prefers-reduced-motion:no-preference){
 .navlinks>a::after,.dd-btn::after{transition:transform .28s var(--e-out)}
 @media (hover:hover) and (pointer:fine){
  .navlinks>a:hover::after,.dd:hover .dd-btn::after{transform:scaleX(1)}
  .btn-primary{transition:background .2s ease-out,color .2s ease-out,transform .18s var(--e-out),box-shadow .2s ease-out}
  .btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(255,122,89,.28)}
  .btn-primary:active{transform:scale(.97);box-shadow:none}
  .module,.profil,.espace-lien,.btn-espace{transition:transform .22s var(--e-out),box-shadow .22s var(--e-out),border-color .2s ease-out}
  .module:hover,.profil:hover{transform:translateY(-4px);box-shadow:var(--shadow-h)}
  .module .icon-box{transition:transform .3s var(--e-out)}
  .module:hover .icon-box{transform:rotate(-6deg) scale(1.06)}
  .espace-lien:hover,.btn-espace:hover{transform:translateY(-2px)}
  .fleche,.btn-espace svg{transition:transform .22s var(--e-out)}
  :is(.espace-lien,.btn)[href]:hover .fleche,.btn:hover .fleche,.btn-espace:hover svg{transform:translateX(3px)}
  .chips a{transition:background .18s ease-out,color .18s ease-out}
 }
 .dd-menu{transform:translateY(8px) scale(.98);transform-origin:16px 0;transition:opacity .16s ease-in,transform .16s ease-in,visibility 0s .16s}
 .dd.open .dd-menu{transform:none;transition:opacity .22s var(--e-out),transform .26s var(--e-out),visibility 0s}
 .dd.open .dd-menu>*{animation:ppDdItem .32s var(--e-out) backwards}
 .dd.open .dd-menu>:nth-child(2){animation-delay:30ms}.dd.open .dd-menu>:nth-child(3){animation-delay:60ms}
 .dd.open .dd-menu>:nth-child(4){animation-delay:90ms}.dd.open .dd-menu>:nth-child(5){animation-delay:120ms}
 .dd.open .dd-menu>:nth-child(n+6){animation-delay:150ms}
 .mobile-nav.open{animation:ppMenu .28s var(--e-out)}
 .mobile-nav.open>*{animation:ppDdItem .34s var(--e-out) backwards}
 .mobile-nav.open>:nth-child(-n+4){animation-delay:40ms}.mobile-nav.open>:nth-child(n+5){animation-delay:90ms}
 .burger path{transition:transform .26s var(--e-out),opacity .18s ease-out}
 .faq details[open] p{animation:ppFaq .32s var(--e-out)}
 .espace-resultat{animation:ppFaq .36s var(--e-out)}
}
@keyframes ppDdItem{from{opacity:0;transform:translate3d(0,6px,0)}}
@keyframes ppMenu{from{opacity:0;transform:translate3d(0,-8px,0)}}
@keyframes ppFaq{from{opacity:0;transform:translate3d(0,-4px,0)}}
@media (prefers-reduced-motion:reduce){.pp-header{transition:none}}


/* ===================================================================================================
   1.6.1 (27/10/2026) : visuels animés (inc/visuels.php, motion/pp-anim.js). Petits écrans dessinés : tableaux
   de bord, courbes qui se tracent, barres qui montent, jauges, facture, cours en ligne, agenda, qualité.
   État final par défaut (sans script, mouvements réduits, capture) ; avec html.anim-js, l'élément attend son
   arrivée à l'écran (classe anim-on) puis se construit.
   =================================================================================================== */
.v-ecran{background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(15,42,68,.12);padding:20px;display:flex;flex-direction:column;gap:12px;width:100%;max-width:440px;font-size:14px;color:var(--navy);text-align:left}
.v-tete{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.v-tete b{display:block;font-family:Sora,Inter,sans-serif;font-size:16px;line-height:1.25}
.v-tete small{display:block;color:var(--slate2);font-size:12.5px}
.v-pastille{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;flex:none;font-size:15px}
.v-navy{background:var(--navy)}.v-mint{background:var(--mint);color:var(--navy)}.v-coral{background:var(--coral)}.v-slate{background:var(--slateblue)}
.v-live{margin-left:auto;font-size:12px;font-weight:600;color:var(--green);display:flex;align-items:center;gap:6px}
.v-live i{width:8px;height:8px;border-radius:50%;background:var(--mint)}
.v-nb{display:block;font-family:Sora,Inter,sans-serif;font-weight:800;font-size:24px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.v-ecran small,.v-widget small{display:block;color:var(--slate2);font-size:12.5px;font-weight:500}
.v-exemple{font-size:11.5px;color:var(--slate2);margin:0;text-align:right}
.v-exemple--clair{color:var(--light);text-align:center;margin-top:18px;opacity:.85}

/* courbe, barres, jauge, progression, coche */
.v-courbe{width:100%;height:auto;display:block;overflow:visible}
.v-ligne{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.vc-mint .v-ligne{stroke:var(--mint)}.vc-coral .v-ligne{stroke:var(--coral)}
.v-aire{opacity:.16}.vc-mint .v-aire{fill:var(--mint)}.vc-coral .v-aire{fill:var(--coral)}
.v-barres{display:flex;align-items:flex-end;gap:8px;height:84px}
.v-barres span{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.v-barres i{display:block;width:100%;height:var(--h);background:var(--slateblue);border-radius:6px 6px 2px 2px;transform-origin:50% 100%}
.v-barres small{font-size:10.5px}
.v-jauge{width:100%;max-width:150px;display:block;margin:0 auto}
.v-j-fond,.v-j-val{fill:none;stroke-width:11;stroke-linecap:round}
.v-j-fond{stroke:var(--line)}
.v-j-val{stroke:var(--mint);stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p))}
.v-prog{display:block;height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:6px}
.v-prog i{display:block;height:100%;width:var(--p);background:var(--mint);border-radius:3px;transform-origin:0 50%}
.v-coche{width:22px;height:22px;border-radius:50%;background:var(--mint);display:inline-flex;align-items:center;justify-content:center;flex:none}
.v-coche svg{width:14px;height:14px}
.v-coche path{fill:none;stroke:var(--navy);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.v-bouton{background:var(--navy);color:#fff;border-radius:10px;padding:8px 12px;font-size:12.5px;font-weight:600}
.v-petit{padding:4px 10px}

/* tableau de bord de Gestion */
.v-ca{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 10px}
.v-ca small{grid-column:1/-1}
.v-ca .v-nb{font-size:30px}
.v-hausse{justify-self:start;font-style:normal;font-size:12px;font-weight:700;color:var(--green);background:var(--mintbg);border-radius:999px;padding:3px 9px}
.v-ca .v-courbe{grid-column:1/-1;margin-top:6px}
.v-tuiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.v-tuiles>span{background:var(--cream);border-radius:12px;padding:10px 12px}
.v-tuiles .v-nb{font-size:20px}

/* facture */
.v-fl{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.v-fl span:last-child{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.v-total{display:flex;justify-content:space-between;align-items:baseline;font-weight:700}
.v-total .v-nb{font-size:22px}
.v-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}
.v-tampon{border:3px solid var(--green);color:var(--green);font-family:Sora,Inter,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:4px 14px;border-radius:8px;transform:rotate(-8deg);font-size:15px}
.v-pipe{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.v-pipe span{background:var(--cream);border-radius:10px;padding:8px 10px}
.v-pipe .v-nb{font-size:20px}

/* cours en ligne */
.v-video{height:96px;border-radius:12px;background:linear-gradient(135deg,#163a5c,#0F2A44);position:relative;display:flex;align-items:center;justify-content:center}
.v-play{width:42px;height:42px;border-radius:50%;background:#fff;position:relative}
.v-play::after{content:"";position:absolute;left:16px;top:12px;border-left:14px solid var(--navy);border-top:9px solid transparent;border-bottom:9px solid transparent}
.v-video-barre{position:absolute;left:14px;right:14px;bottom:12px;height:4px;background:rgba(255,255,255,.25);border-radius:2px;overflow:hidden}
.v-video-barre i{display:block;height:100%;width:64%;background:var(--mint);transform-origin:0 50%}
.v-chap{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.v-chap li{display:grid;grid-template-columns:auto 1fr 70px;gap:10px;align-items:center;font-size:13.5px}
.v-chap .v-prog{margin:0}
.v-rond{width:22px;height:22px;border-radius:50%;border:2px solid var(--light)}
.v-vente{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:end;background:var(--cream);border-radius:12px;padding:10px 12px}
.v-vente .v-courbe{max-height:56px}

/* agenda */
.v-grille{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:auto repeat(3,30px);gap:6px}
.v-jour{font-size:11.5px;color:var(--slate2);text-align:center;font-weight:600}
.v-cr{border-radius:8px;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;background:var(--mintbg);color:var(--green)}
.v-cr.c1{background:#ffe9e2;color:#b3361d}.v-cr.c2{background:#e6edf7;color:#3a5a8a}
.v-appel{display:flex;justify-content:space-between;align-items:center;gap:12px}
.v-presents{display:grid;grid-template-columns:repeat(5,12px);gap:5px}
.v-presents i{width:12px;height:12px;border-radius:50%;background:var(--mint)}
.v-presents i.abs{background:var(--coral)}
.v-emarg{display:flex;justify-content:space-between;align-items:center;background:var(--cream);border-radius:10px;padding:8px 12px;font-weight:600;font-size:13.5px}

/* qualité */
.v-q-haut{display:grid;grid-template-columns:1fr 1.2fr;gap:14px;align-items:end}
.v-q-jauge{text-align:center}
.v-q-jauge>span{display:block;margin-top:-6px}
.v-ind{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.v-ind li{display:flex;gap:10px;align-items:center;font-size:13.5px}

/* bande de l'accueil */
.v-accueil{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.v-widget{background:#fff;color:var(--navy);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:6px}
.v-mod{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--mintbg);color:var(--green);margin-bottom:4px}
.v-widget .v-nb{font-size:30px}
.v-viz{margin-top:auto;padding-top:8px;min-height:84px;display:flex;align-items:flex-end}
.v-viz>*{width:100%}
.v-viz .v-prog{height:10px;border-radius:5px}
@media (max-width:1100px){.v-accueil{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.v-accueil{grid-template-columns:1fr}}

/* vignettes du problème */
.vg-f{fill:#fff;stroke:var(--navy);stroke-width:2}.vg-l{fill:var(--navy)}.vg-l2{fill:var(--light)}
.vg-sig{fill:none;stroke:var(--coral);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1}
.vg-fl,.vg-ok{fill:none;stroke:var(--mint);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.vg-ok{stroke:var(--green)}
.vg-eur{font:700 9px Sora,Inter,sans-serif;fill:var(--navy)}
.vg-rond{fill:var(--mintbg);stroke:var(--mint);stroke-width:2}
.vg-trait{stroke:var(--navy);stroke-width:2}
.vg-cases rect{fill:var(--mint)}.vg-cases rect.abs{fill:var(--coral)}
.vg :is(.vg-rond,.vg-cases rect){transform-box:fill-box;transform-origin:center}

/* page Gestion : onglets */
.gp-onglets{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px 40px;align-items:start}
.gp-liste{display:flex;flex-direction:column;gap:10px;grid-row:1/3}
.gp-tab{display:flex;gap:14px;align-items:center;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:16px 18px;cursor:pointer;color:var(--navy);font:inherit;width:100%}
.gp-tab strong{display:block;font-size:16px}
.gp-tab small{display:block;color:var(--slate2);font-size:13px;margin-top:2px}
.gp-num{width:36px;height:36px;border-radius:10px;background:var(--cream);font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.gp-tab[aria-selected="true"]{border-color:var(--slateblue);box-shadow:var(--shadow-h)}
.gp-tab[aria-selected="true"] .gp-num{background:var(--slateblue);color:#fff}
.gp-crm[aria-selected="true"] .gp-num{background:var(--navy)}.gp-formation[aria-selected="true"] .gp-num{background:var(--mint);color:var(--navy)}.gp-centre[aria-selected="true"] .gp-num{background:var(--coral)}
.gp-panneau{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:center}
.gp-panneau[hidden]{display:none}
.gp-ecran .v-ecran{max-width:none}
.gp-points{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px;font-size:17px;font-weight:600;line-height:1.35}
.gp-points li{display:flex;gap:12px;align-items:center}
.page-gestion .step-n svg{color:var(--mint)}
.page-gestion .phone-wrap .v-ecran{max-width:470px}
@media (max-width:1100px){
 .gp-onglets{grid-template-columns:minmax(0,1fr)}
 .gp-liste{min-width:0;grid-row:auto;flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;margin:0 -4px}
 .gp-tab{min-width:230px;scroll-snap-align:start}
}
@media (max-width:760px){.gp-panneau{grid-template-columns:minmax(0,1fr)}.gp-ecran{min-width:0}.gp-points{font-size:16px}.v-tuiles{grid-template-columns:1fr 1fr 1fr}.v-ecran{padding:16px}}

/* ---- la construction (seulement avec html.anim-js : mouvements autorisés, script actif) ---- */
.anim-js [data-anim]:not(.anim-on) :is(.v-fl,.v-cr,.v-presents i,.v-coche,.v-widget,.v-tampon,.vg-rond,.vg-cases rect,.v-hausse){opacity:0}
.anim-js [data-anim]:not(.anim-on) :is(.v-ligne,.vg-sig,.vg-fl,.vg-ok){stroke-dashoffset:1}
.anim-js [data-anim]:not(.anim-on) .v-aire{opacity:0}
.anim-js [data-anim]:not(.anim-on) :is(.v-barres i,.v-prog i,.v-video-barre i){transform:scale(0,1)}
.anim-js [data-anim]:not(.anim-on) .v-barres i{transform:scale(1,0)}
.anim-js [data-anim]:not(.anim-on) .v-j-val{stroke-dashoffset:100}
.anim-js .anim-on .v-ligne{animation:vTrace 1.7s var(--e-out) .25s backwards}
.anim-js .anim-on .v-aire{animation:vAire .9s ease-out 1.1s backwards}
.anim-js .anim-on .v-barres i{animation:vMonte .8s var(--e-out) calc(.25s + var(--k,0) * 90ms) backwards}
.anim-js .anim-on .v-prog i{animation:vRemplit 1.1s var(--e-out) calc(.35s + var(--k,0) * 150ms) backwards}
.anim-js .anim-on .v-video-barre i{animation:vRemplit 2.4s linear .3s backwards}
.anim-js .anim-on .v-j-val{animation:vJauge 1.5s var(--e-out) .35s backwards}
.anim-js .anim-on .v-coche{animation:vPop .5s var(--e-out) calc(.5s + var(--k,0) * 180ms) backwards}
.anim-js .anim-on .v-fl{animation:vUp .55s var(--e-out) calc(.15s + var(--k,0) * 160ms) backwards}
.anim-js .anim-on .v-tampon{animation:vTampon .55s cubic-bezier(.2,1.4,.4,1) 1.5s backwards}
.anim-js .anim-on .v-hausse{animation:vPop .5s var(--e-out) 1.4s backwards}
.anim-js .anim-on .v-cr{animation:vPop .45s var(--e-out) calc(.2s + var(--k,0) * 110ms) backwards}
.anim-js .anim-on .v-presents i{animation:vPop .35s var(--e-out) calc(.6s + var(--k,0) * 45ms) backwards}
.anim-js .anim-on .v-widget{animation:vUp .7s var(--e-out) calc(var(--k,0) * 120ms) backwards}
.anim-js .anim-on :is(.vg-sig,.vg-fl,.vg-ok){animation:vTrace 1.1s var(--e-out) .5s backwards}
.anim-js .anim-on .vignette:nth-child(2) :is(.vg-ok){animation-delay:1.1s}
.anim-js .anim-on .vg-rond{animation:vPop .5s var(--e-out) .8s backwards}
.anim-js .anim-on .vg-cases rect{animation:vPop .4s var(--e-out) calc(.9s + var(--k,0) * 0s) backwards}
.anim-js .anim-on .vg-cases rect:nth-child(2){animation-delay:1s}.anim-js .anim-on .vg-cases rect:nth-child(3){animation-delay:1.1s}
.anim-js .anim-on .vg-cases rect:nth-child(4){animation-delay:1.2s}.anim-js .anim-on .vg-cases rect:nth-child(5){animation-delay:1.3s}.anim-js .anim-on .vg-cases rect:nth-child(6){animation-delay:1.45s}
.anim-js .v-live i{animation:vPouls 1.8s ease-in-out infinite}
.anim-js .v-play{animation:vPouls 2.2s ease-in-out infinite}
@keyframes vTrace{from{stroke-dashoffset:1}}
@keyframes vAire{from{opacity:0}}
@keyframes vMonte{from{transform:scale(1,0)}}
@keyframes vRemplit{from{transform:scale(0,1)}}
@keyframes vJauge{from{stroke-dashoffset:100}}
@keyframes vPop{from{opacity:0;transform:scale(.4)}}
@keyframes vUp{from{opacity:0;transform:translate3d(0,12px,0)}}
@keyframes vTampon{from{opacity:0;transform:rotate(-20deg) scale(1.9)}}
@keyframes vPouls{50%{transform:scale(1.12);opacity:.85}}
@media print{.anim-js [data-anim] *{animation:none!important;opacity:1!important;stroke-dashoffset:revert!important}}

/* =========================================================================
   1.6.2 (28/10/2026) — offre validée par Karim : sept modules « Passerelle Pro … » au même niveau, en deux groupes,
   formules types (lycée, formateur indépendant, artisan, CFA) et profil métier par espace.
   ========================================================================= */
.pp-pre{font-weight:500;color:var(--slate2);font-size:.82em}
.dd-menu{flex-direction:row;flex-wrap:wrap;min-width:680px;gap:4px 10px}
.dd-col{flex:1 1 300px;display:flex;flex-direction:column;gap:2px;min-width:0}
.dd-pied{flex-basis:100%}
.groupe-h{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate2);margin:34px 0 14px}
.suite .groupe-h{color:var(--light)}
.suite .groupe-h:first-of-type{margin-top:8px}
.modules.g3{grid-template-columns:repeat(3,1fr)}
.metiers{margin:30px auto 0;max-width:860px;text-align:center;background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px}
.metiers .h3{font-size:20px;margin:0 0 6px}
.metiers p{margin:0 0 14px;color:var(--slate2)}
.metiers .chips{justify-content:center}
.chips span{display:inline-block;font-size:13px;font-weight:600;border-radius:999px;padding:5px 11px;background:#fff;border:1px solid var(--line);color:var(--navy)}
.gp-num svg{display:block}
@media (max-width:1180px){.modules.g3{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.modules.g3{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:no-preference){
  .anim-js .metiers .chips li{animation:ppDdItem .4s var(--e-out) backwards}
  .anim-js .metiers .chips li:nth-child(2){animation-delay:40ms}.anim-js .metiers .chips li:nth-child(3){animation-delay:80ms}
  .anim-js .metiers .chips li:nth-child(4){animation-delay:120ms}.anim-js .metiers .chips li:nth-child(5){animation-delay:160ms}
  .anim-js .metiers .chips li:nth-child(6){animation-delay:200ms}.anim-js .metiers .chips li:nth-child(7){animation-delay:240ms}
}
.dd-item>span:last-child{min-width:0}
.dd-col .dd-item small{display:block;white-space:normal;line-height:1.35}
.gp-onglets{scroll-margin-top:100px}

/* =========================================================================
   1.6.3 (28/10/2026, Karim : « le menu sur téléphone est moche ») — tuiles de modules : carré arrondi 40 px de fond
   pâle à la couleur du module, pictogramme 22 px (même jeu que le menu de Gestion), titre court, public en petit.
   Mêmes tuiles dans le menu téléphone, le menu ordinateur, l'accueil, le pied de page et les onglets de /gestion/.
   Bouton « Mon espace » plein, bleu nuit.
   ========================================================================= */
.tuile{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;color:var(--navy);min-width:0;text-decoration:none}
.tuile:hover,.tuile:focus-visible,.tuile[aria-current]{background:var(--cream);color:var(--navy)}
.tuile-ico{width:40px;height:40px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--navy);background:#eef2f6;background:color-mix(in srgb,var(--c) 15%,#fff)}
.tuile-ico svg{display:block}
.tuile-txt{display:flex;flex-direction:column;min-width:0}
.tuile-txt strong{font-size:15px;font-weight:700;line-height:1.25}
.tuile-txt small{font-size:12.5px;line-height:1.35;color:var(--slate2);font-weight:400}
/* téléphone : grille de deux colonnes, une carte par module */
.mobile-nav .tuiles-mob{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:4px 0 10px}
.mobile-nav .tuiles-mob .tuile{flex-direction:column;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff}
.mobile-nav .tuiles-mob .tuile:hover,.mobile-nav .tuiles-mob .tuile[aria-current]{border-color:var(--c);background:#fff}
.mobile-nav .mob-h{padding:12px 0 4px}
/* menu ordinateur */
.dd-col .tuile-dd{padding:8px 10px}
/* pied de page */
.foot-col .tuile-pied{padding:2px 0;gap:10px;border-radius:10px}
.foot-col .tuile-pied:hover{background:none}
.foot-col .tuile-pied:hover strong{color:var(--green)}
.tuile-pied .tuile-ico{width:30px;height:30px;border-radius:9px}
.tuile-pied svg{width:18px;height:18px}
.tuile-pied .tuile-txt strong{font-size:14.5px;font-weight:600}
.tuile-pied .tuile-txt small{display:none}
/* accueil : la carte prend la couleur de son module */
.module.mod-tuile{border-top:4px solid var(--c)}
.tuile-ico-l{width:52px;height:52px;border-radius:14px}
/* onglets de la page des modules de gestion */
.gp-tab .tuile-ico{width:40px;height:40px}
.gp-tab[aria-selected="true"] .tuile-ico{box-shadow:inset 0 0 0 2px var(--c)}
/* bouton Mon espace plein */
.btn-espace.btn-espace-plein{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-espace.btn-espace-plein svg{color:var(--mint)}
.btn-espace.btn-espace-plein:hover,.btn-espace.btn-espace-plein[aria-current]{background:var(--navy2);border-color:var(--navy2);color:#fff}
.mobile-nav .btn-espace-plein{width:100%;justify-content:center;padding:14px 16px;font-size:16px;margin:4px 0 6px}
@media (prefers-reduced-motion:no-preference){
  .tuile,.tuile-ico{transition:background-color .18s ease-out,border-color .18s ease-out,transform .18s var(--e-out)}
  .tuile:hover .tuile-ico{transform:scale(1.06)}
  .mobile-nav.open .tuiles-mob .tuile{animation:ppDdItem .32s var(--e-out) backwards}
  .mobile-nav.open .tuiles-mob .tuile:nth-child(2){animation-delay:30ms}.mobile-nav.open .tuiles-mob .tuile:nth-child(3){animation-delay:60ms}
  .mobile-nav.open .tuiles-mob .tuile:nth-child(4){animation-delay:90ms}.mobile-nav.open .tuiles-mob .tuile:nth-child(5){animation-delay:120ms}
  .mobile-nav.open .tuiles-mob .tuile:nth-child(6){animation-delay:150ms}.mobile-nav.open .tuiles-mob .tuile:nth-child(7){animation-delay:180ms}
}