@font-face{font-family:'Geist';font-weight:400;font-display:swap;src:url(polices/Geist-400.woff2) format('woff2')}
@font-face{font-family:'Geist';font-weight:500;font-display:swap;src:url(polices/Geist-500.woff2) format('woff2')}
@font-face{font-family:'Geist';font-weight:600;font-display:swap;src:url(polices/Geist-600.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-weight:450;font-display:swap;src:url(polices/Fraunces-450.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-weight:500;font-display:swap;src:url(polices/Fraunces-500.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(polices/InstrumentSerif-Italic.woff2) format('woff2')}

:root{
  --bleu:#024aaa;--bleu-f:#013478;--bleu-n:#001f4d;--bleu-d:#e8f0fc;--bleu-dd:#f3f7fe;
  --vert:#03bd65;--vert-f:#029950;--vert-d:#e6f9ef;
  --creme:#faf7f2;--creme-f:#f3ede2;
  --encre:#1a1f2e;--encre-d:#2a3142;--pierre:#6b6e7a;--trait:rgba(26,31,46,.07);
  --o-carte:0 1px 2px rgba(2,74,170,.04),0 18px 40px -22px rgba(2,74,170,.22);
  --facile:cubic-bezier(.22,.8,.24,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--creme);color:var(--encre);font:400 16px/1.6 'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;color:var(--vert);letter-spacing:0}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 24px}

/* Navigation */
.nav{position:sticky;top:0;z-index:50;background:rgba(250,247,242,.78);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s}
.nav.ombre{border-bottom-color:var(--trait)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{width:132px;height:auto}
.pastille{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:999px;background:#fff;border:1px solid var(--trait);
  font-size:13.5px;font-weight:500;color:var(--encre-d);box-shadow:0 1px 2px rgba(2,74,170,.05)}
.point{width:7px;height:7px;border-radius:50%;background:var(--vert);box-shadow:0 0 0 0 rgba(3,189,101,.5);animation:pouls 2.4s infinite}
@keyframes pouls{0%{box-shadow:0 0 0 0 rgba(3,189,101,.45)}70%{box-shadow:0 0 0 9px rgba(3,189,101,0)}100%{box-shadow:0 0 0 0 rgba(3,189,101,0)}}

/* Hero */
main{overflow-x:clip}
.hero{position:relative;padding:56px 0 40px}
.halo{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
.h1{width:620px;height:620px;right:-160px;top:-30px;background:radial-gradient(circle,rgba(2,74,170,.13),rgba(2,74,170,0) 68%)}
.h2{width:520px;height:520px;left:-200px;bottom:-200px;background:radial-gradient(circle,rgba(3,189,101,.10),rgba(3,189,101,0) 68%)}
.hero-in{position:relative;display:grid;grid-template-columns:1.02fr 1fr;gap:40px;align-items:center}
.sur{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bleu)}
h1{font-family:'Fraunces',Georgia,serif;font-weight:450;font-size:clamp(40px,5.6vw,66px);line-height:1.02;letter-spacing:-.03em;margin-top:18px;color:var(--encre)}
h1 em{font-size:1.08em}
.chapo{margin-top:22px;font-size:18px;line-height:1.6;color:var(--encre-d);max-width:500px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 24px;border-radius:999px;font-weight:600;font-size:15.5px;letter-spacing:-.005em;
  transition:transform .35s var(--facile),box-shadow .35s var(--facile),background .25s}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible,.onglet:focus-visible,a:focus-visible{outline:3px solid rgba(2,74,170,.35);outline-offset:3px}
.btn-v{background:var(--vert);color:#fff;box-shadow:0 12px 26px -12px rgba(3,189,101,.75)}
.btn-v:hover{box-shadow:0 18px 32px -12px rgba(3,189,101,.8)}
.btn-c{background:#fff;color:var(--bleu);border:1.5px solid rgba(2,74,170,.16)}
.btn-c:hover{border-color:rgba(2,74,170,.35)}
.btn-blanc{background:#fff;color:var(--bleu-f);box-shadow:0 14px 30px -14px rgba(0,15,45,.6)}
.confiance{display:flex;align-items:center;gap:14px;margin-top:38px}
.confiance img{width:44px;height:auto;filter:drop-shadow(0 8px 12px rgba(0,31,77,.18))}
.confiance p{display:flex;flex-direction:column;font-size:14px;line-height:1.45;color:var(--pierre)}
.confiance b{font-weight:600;color:var(--encre)}

.hero-vis{position:relative;height:600px}
.trainee{position:absolute;inset:0;width:100%;height:100%}
.tel{position:absolute;width:330px;height:auto;will-change:transform}
.t-c{left:50%;top:0;margin-left:-165px;z-index:3;animation:flotte 7s ease-in-out infinite}
.t-g{left:50%;top:70px;margin-left:-330px;width:280px;z-index:2;opacity:.98;transform:rotate(-7deg);animation:flotte-g 8s ease-in-out infinite}
.t-d{left:50%;top:84px;margin-left:50px;width:280px;z-index:2;opacity:.98;transform:rotate(6deg);animation:flotte-d 9s ease-in-out infinite}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes flotte-g{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(-7deg) translateY(7px)}}
@keyframes flotte-d{0%,100%{transform:rotate(6deg) translateY(0)}50%{transform:rotate(6deg) translateY(-6px)}}
/* Sections */
.bloc{padding:110px 0}
.bloc.doux{background:linear-gradient(180deg,#fff 0%,var(--bleu-dd) 100%);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.tete{text-align:center;max-width:640px;margin:0 auto 56px}
.tete.gauche{text-align:left;margin:0 0 32px}
h2{font-family:'Fraunces',Georgia,serif;font-weight:450;font-size:clamp(32px,4vw,46px);line-height:1.08;letter-spacing:-.025em;margin-top:14px}
h2 em{font-size:1.08em}
.ps{margin-top:14px;color:var(--pierre);font-size:17px}

.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.carte{background:#fff;border:1px solid var(--trait);border-radius:24px;padding:30px 28px 32px;box-shadow:var(--o-carte);
  transition:transform .45s var(--facile),box-shadow .45s var(--facile)}
.carte:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(2,74,170,.04),0 28px 50px -26px rgba(2,74,170,.3)}
.pic{width:50px;height:50px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:var(--bleu-d);color:var(--bleu);transition:background .35s,color .35s}
.carte:hover .pic{background:var(--vert-d);color:var(--vert-f)}
.carte h3{font-size:19px;font-weight:600;letter-spacing:-.015em;margin-top:22px}
.carte p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--pierre)}

/* Profils */
.profils{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.onglets{display:flex;flex-wrap:wrap;gap:8px}
.onglet{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 17px;border-radius:999px;border:1.5px solid rgba(26,31,46,.09);background:#fff;
  font:500 14.5px 'Geist',system-ui,sans-serif;color:var(--encre-d);cursor:pointer;transition:all .3s var(--facile)}
.onglet:hover{border-color:rgba(2,74,170,.3)}
.onglet.on{background:var(--bleu);border-color:var(--bleu);color:#fff;box-shadow:0 10px 20px -10px rgba(2,74,170,.7)}
.panneaux{margin-top:30px;min-height:130px}
.panneau h3{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:26px;letter-spacing:-.02em}
.panneau p{margin-top:10px;font-size:16.5px;color:var(--pierre);max-width:440px}
.panneau.on{animation:entre .5s var(--facile)}
@keyframes entre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.profils-vis{position:relative;height:620px}
.disque{position:absolute;left:50%;top:50%;width:440px;height:440px;margin:-240px 0 0 -220px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0%,var(--bleu-d) 55%,rgba(232,240,252,0) 72%)}
.ecran{position:absolute;left:50%;top:0;width:340px;height:auto;margin-left:-170px;opacity:0;transform:translateY(16px) scale(.98);
  transition:opacity .55s var(--facile),transform .55s var(--facile);pointer-events:none}
.ecran.on{opacity:1;transform:none}

/* Étapes */
.etapes{list-style:none;margin:0 auto;padding:0;display:flex;justify-content:space-between;max-width:900px;position:relative}
.etapes::before{content:"";position:absolute;left:8%;right:8%;top:31px;border-top:2px dashed rgba(2,74,170,.18)}
.etapes li{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;font-weight:500;font-size:15.5px;color:var(--encre-d);flex:1}
.rond{width:64px;height:64px;border-radius:50%;background:#fff;border:1px solid var(--trait);display:flex;align-items:center;justify-content:center;color:var(--bleu);
  box-shadow:0 12px 26px -16px rgba(2,74,170,.4)}
.etapes li:last-child .rond{background:var(--vert);color:#fff;border-color:var(--vert);box-shadow:0 14px 26px -12px rgba(3,189,101,.7)}

/* Appel final */
.bloc.fin{padding-top:20px}
.appel{position:relative;overflow:hidden;border-radius:32px;padding:72px 32px;text-align:center;color:#fff;
  background:linear-gradient(145deg,#0a5fd1 0%,#024aaa 40%,#013478 80%,#001f4d 100%)}
.appel-halo{position:absolute;width:520px;height:520px;right:-140px;top:-220px;border-radius:50%;background:radial-gradient(circle,rgba(61,220,143,.28),rgba(61,220,143,0) 70%)}
.appel h2{position:relative;margin-top:0;color:#fff}
.appel p{position:relative;max-width:520px;margin:16px auto 30px;color:rgba(255,255,255,.78);font-size:17px}
.appel .btn{position:relative}

/* Pied de page */
.pied{background:#0b1730;color:rgba(255,255,255,.62);margin-top:110px;padding:64px 0 36px}
.pied-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.logo-pied{width:120px;opacity:.95}
.pied-txt{margin-top:14px;font-size:15px}
.pied-bas{margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);width:100%;display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:rgba(255,255,255,.45)}
.pied-bas a{transition:color .25s}
.pied-bas a:hover{color:#fff}

/* Apparition au défilement */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--facile),transform .8s var(--facile)}
.js .rv[data-d="1"]{transition-delay:.08s}.js .rv[data-d="2"]{transition-delay:.16s}.js .rv[data-d="3"]{transition-delay:.24s}.js .rv[data-d="4"]{transition-delay:.32s}
.js .rv.vu{opacity:1;transform:none}

/* Tablette et téléphone */
@media (max-width:960px){
  .hero-in,.profils{grid-template-columns:1fr}
  .hero{padding-top:36px}
  .hero-txt{text-align:center;display:flex;flex-direction:column;align-items:center}
  .chapo{max-width:560px}
  .actions,.confiance{justify-content:center}
  .confiance p{text-align:left}
  .hero-vis{height:540px;max-width:560px;width:100%;margin:0 auto}
  .grille{grid-template-columns:repeat(2,1fr)}
  .tete.gauche{text-align:center}
  .onglets{justify-content:center}
  .panneau{text-align:center}.panneau p{margin-left:auto;margin-right:auto}
  .profils-vis{height:580px}
}
@media (max-width:620px){
  .wrap{padding:0 20px}
  .nav-in{height:64px}.logo{width:112px}
  .pastille{font-size:12.5px;padding:7px 12px}
  .chapo{font-size:16.5px}
  .btn{height:50px;padding:0 20px;font-size:15px}
  .actions{flex-direction:column;align-items:stretch;width:100%}
  .actions .btn{justify-content:center}
  .hero-vis{height:430px}
  .tel{width:250px}.t-c{margin-left:-125px}
  .t-g,.t-d{width:200px}.t-g{margin-left:-210px;top:58px}.t-d{margin-left:10px;top:66px}
  .avion{display:none}
  .bloc{padding:76px 0}
  .grille{grid-template-columns:1fr}
  .carte{padding:26px 24px}
  .profils-vis{height:500px}
  .ecran{width:280px;margin-left:-140px}
  .disque{width:340px;height:340px;margin:-190px 0 0 -170px}
  .etapes{flex-wrap:wrap;justify-content:center;gap:26px 0}
  .etapes::before{display:none}
  .etapes li{flex:0 0 33.33%}
  .appel{padding:56px 22px;border-radius:26px}
  .pied{margin-top:76px}
  .pied-bas{flex-direction:column;align-items:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
  .avion{display:none}
}