/* =========================================================
   TOKENS : ajuster ici les couleurs exactes du site actuel
   ========================================================= */
:root{
  --navy:#0B1F44;        /* bleu foncé du logo / fonds sombres */
  --blue:#1E5BFF;        /* bleu principal boutons / liens */
  --blue-dark:#1447D6;   /* hover boutons */
  --blue-soft:#EAF0FF;   /* fonds de section clairs */
  --gold:#F6BE46;        /* boutons principaux */
  --gold-dark:#E5AB2E;   /* hover boutons */
  --ink:#141A2B;         /* texte principal */
  --muted:#5B6478;       /* texte secondaire */
  --line:#DDE3F0;
  --white:#FFFFFF;
  --tp:#00B67A;          /* vert Trustpilot */
  --radius:16px;
  --container:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}


/* WordPress enveloppe chaque template part dans un <div>. Sans display:contents,
   ce div devient le bloc conteneur de <header position:sticky>, qui cesse alors
   de coller au scroll. display:contents supprime la boîte du wrapper. */
.wp-block-template-part{display:contents}

/* Le figure ajouté autour des images ne doit pas introduire de marge propre
   (WordPress applique .wp-block-image{margin:0 0 1em}). Placée ici, AVANT les
   règles de la maquette, pour ne pas écraser leurs marges (ex. .ia-logo). */
.wp-block-image{margin:0}
html{scroll-behavior:smooth}
body{font-family:'Manrope',system-ui,sans-serif;color:var(--ink);background:var(--white);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;min-width:0}
.hero-grid>*,.histoire-grid>*,.eco-grid>*,.vivre-grid>*{min-width:0}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,4.5vw,3.6rem);font-weight:800}
h2{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:800}
h3{font-size:1.2rem;font-weight:700}
.hl{font-style:normal;color:var(--blue)}
.reco .hl,.offerte .hl{color:var(--gold)}
p.lead{font-size:1.15rem;color:var(--muted);max-width:56ch}
.kicker{display:inline-block;font-weight:700;color:var(--blue);margin-bottom:12px;font-size:.95rem}
section{padding:96px 0}
@media(max-width:768px){section{padding:64px 0}.offerte{margin-top:64px;padding-top:64px}}

/* Boutons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;font-weight:700;font-size:1rem;transition:background .2s,transform .2s;white-space:nowrap}
.btn-primary{background:var(--gold);color:var(--navy);box-shadow:0 12px 32px rgba(246,190,70,.45),0 4px 12px rgba(246,190,70,.25);transition:background .2s,transform .2s,box-shadow .2s}
.btn-primary::after{content:"\2192";font-size:1.1em;margin-left:2px;transition:transform .2s}
.btn-primary:hover{background:var(--gold-dark);transform:translateY(-2px);box-shadow:0 18px 40px rgba(246,190,70,.55),0 6px 14px rgba(246,190,70,.3)}
.btn-primary:hover::after{transform:translateX(3px)}
.btn-ghost{border:2px solid var(--navy);color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{background:var(--blue-soft)}
.btn-sm{padding:10px 18px;font-size:.92rem}
.btn-outline{border:1.5px solid var(--blue);color:var(--blue);background:#F7F9FF;border-radius:999px}
.btn-outline:hover{background:var(--blue-soft)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* =========================================================
   BANDEAU
   ========================================================= */
.topbar{background:var(--navy);color:#fff;font-size:1rem;text-align:center;padding:16px 16px}
.topbar strong{font-weight:800}
.topbar a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;margin-left:8px;font-weight:700}

/* =========================================================
   HEADER
   ========================================================= */
header{position:sticky;position:-webkit-sticky;top:0;z-index:50;padding:14px 16px 0;pointer-events:none}
.nav{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px;max-width:1240px;margin:0 auto;padding:0 10px 0 22px;border-radius:999px;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 40px rgba(11,31,68,.10),0 1px 0 rgba(255,255,255,.6) inset;border:1px solid rgba(255,255,255,.7)}
.logo{flex-shrink:0}
.logo img{height:40px;width:auto}
.menu{display:flex;align-items:center;gap:2px}
.menu>li{position:relative}
.menu>li>a{display:block;padding:10px 12px;font-weight:600;font-size:.95rem;color:var(--ink);border-radius:8px;white-space:nowrap}
.menu>li>a:hover{background:var(--blue-soft);color:var(--blue)}
.menu .has-sub>a::after{content:"";display:inline-block;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:0 0 3px 8px}
.submenu{position:absolute;top:calc(100% + 14px);left:0;min-width:300px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:0 20px 50px rgba(11,31,68,.12);opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s}
.has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{display:block;padding:10px 12px;border-radius:8px;font-weight:500;color:var(--ink)}
.submenu a:hover{background:var(--blue-soft);color:var(--blue)}
.submenu a span{display:block;font-size:.8rem;color:var(--muted);font-weight:400}
.nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-actions .login{font-weight:600;padding:10px 14px;color:var(--muted)}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--navy);margin:6px auto;width:24px}
@media(max-width:1340px){
  .menu>li>a{padding:10px 9px;font-size:.9rem}
  .nav-actions .login{display:none}
  .nav{gap:10px}
}
@media(max-width:1180px){
  .menu,.nav-actions .login{display:none}
  .burger{display:block}
  .nav-actions .btn{display:none}
}
.mobile-menu{display:none;pointer-events:auto;background:#fff;border-radius:24px;box-shadow:0 20px 50px rgba(11,31,68,.16);padding:12px 24px 24px;max-width:1120px;margin:10px auto 0}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:12px 0;font-weight:600;border-bottom:1px solid var(--line)}
.mobile-menu .sub a{padding-left:16px;font-weight:500;color:var(--muted)}
.mobile-menu .btn{margin-top:16px;justify-content:center;width:100%}

/* =========================================================
   HERO
   ========================================================= */
.hero{margin-top:-96px;padding:170px 0 0;background:linear-gradient(180deg,var(--blue-soft) 0%,#fff 100%)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero h1{margin:12px 0 20px;color:var(--navy)}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 20px}
.hero .note{font-size:.9rem;color:var(--muted)}
.hero-media{position:relative}
.hero-photo{width:142%;max-width:none;height:auto;display:block;margin-left:-21%}
.hero-media{align-self:end;margin-bottom:-1px}
.hero{overflow:hidden}
.hero-grid{align-items:end}
.hero-grid>div:first-child{padding-bottom:72px}
.tp-badge{position:absolute;left:0;bottom:148px;background:#fff;border-radius:14px;padding:12px 16px;box-shadow:0 14px 34px rgba(11,31,68,.14);display:flex;align-items:center;gap:12px}
.tp-badge .stars{color:var(--tp);letter-spacing:2px;font-size:1.05rem}
.tp-badge small{display:block;color:var(--muted);font-size:.78rem}
.tp-badge b{font-size:.95rem}
@media(max-width:900px){
  .hero{margin-top:-80px;padding-top:120px}
  .hero-grid{grid-template-columns:1fr}
  .hero-media{max-width:420px}
  .tp-badge{left:12px;bottom:24px}
  .hero-photo{width:120%;margin-left:-10%}
}
/* Composition téléphone + images flottantes (section IMMO ACADEMY) */
.eco-media{position:relative;width:100%;max-width:520px;margin:0 auto;padding:24px 60px}
.eco-media::before{content:"";position:absolute;inset:-10% -30% -5%;z-index:0;pointer-events:none;background:radial-gradient(60% 55% at 45% 40%,rgba(30,91,255,.45),transparent 70%),radial-gradient(45% 45% at 80% 75%,rgba(246,190,70,.45),transparent 70%),radial-gradient(50% 50% at 20% 85%,rgba(11,31,68,.35),transparent 70%);filter:blur(40px)}
.phone{z-index:1;-webkit-mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.6) 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.6) 78%,transparent 100%)}
.eco-card .ico{background:#fff}
.eco .cta{align-self:flex-start}
/* Mockup iPhone en CSS */
.phone{position:relative;width:100%;aspect-ratio:9/19.5;border-radius:52px;background:linear-gradient(160deg,#3a3a40,#121216);padding:12px;box-shadow:0 40px 80px rgba(11,31,68,.32),inset 0 0 0 2px #6a6a72,inset 0 0 0 4px #1a1a1e}
.phone::before{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:30%;height:26px;background:#0a0a0c;border-radius:20px;z-index:3}
.phone::after{content:"";position:absolute;top:31px;left:calc(50% + 6%);width:9px;height:9px;border-radius:50%;background:#1d2a44;box-shadow:inset 0 0 2px #4a6cff;z-index:4}
.phone .btn-side{position:absolute;background:#2a2a30;border-radius:3px}
.phone .btn-side.mute{left:-3px;top:15%;width:4px;height:5%}
.phone .btn-side.vol1{left:-3px;top:23%;width:4px;height:9%}
.phone .btn-side.vol2{left:-3px;top:34%;width:4px;height:9%}
.phone .btn-side.power{right:-3px;top:26%;width:4px;height:14%}
.phone .screen{position:relative;width:100%;height:100%;border-radius:40px;overflow:hidden;background:#000}
.phone-img{width:100%;height:100%;object-fit:cover;object-position:top}
.phone .screen::after{content:"";position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:36%;height:5px;border-radius:5px;background:rgba(255,255,255,.85)}
.float{position:absolute;filter:drop-shadow(0 18px 34px rgba(11,31,68,.22));z-index:5;animation:floatY 4s ease-in-out infinite}
.float-laptop{width:48%;left:-6%;top:31%}
.float-tp{width:38%;right:-8%;top:40%;animation-delay:-1.3s;animation-duration:4.6s}
.float-video{width:38%;left:2%;bottom:1%;animation-delay:-2.6s;animation-duration:5.2s}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media(prefers-reduced-motion:reduce){.float{animation:none}}
@media(max-width:900px){.eco-media{max-width:400px;padding:16px 40px}}

/* Chiffres clés */
.stats{padding:0 0 96px;position:relative;z-index:2}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-radius:var(--radius);overflow:hidden;background:var(--navy);color:#fff;text-align:center}
.stat{padding:44px 24px;color:inherit;text-decoration:none}
.stat i{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#fff;color:var(--navy);margin:0 auto 22px}
.stat b{display:block;font-size:3.2rem;font-weight:800;line-height:1;letter-spacing:-.03em;margin-bottom:12px}
.stat .count{font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit}
.stat span{color:rgba(255,255,255,.85);font-weight:500;font-size:1.05rem}
@media(max-width:768px){
  .stats-grid{grid-template-columns:1fr}
  .stat{padding:32px 24px}
}

/* =========================================================
   TU TE RECONNAIS ?
   ========================================================= */
.reco{background:var(--navy);color:#fff}
.reco h2{max-width:24ch}
.reco-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 64px;margin-top:48px;max-width:980px}
.reco-item{padding:8px 0}
.reco-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--gold);color:var(--navy);margin-bottom:16px}
.reco-ico svg{width:26px;height:26px}
.reco-item h3{color:#fff;margin-bottom:8px}
.reco-item p{color:rgba(255,255,255,.72)}
.reco .closing{margin-top:88px;padding-top:56px;border-top:1px solid rgba(255,255,255,.14);text-align:center}
.reco .closing p{font-size:clamp(1.5rem,2.8vw,2.3rem);font-weight:800;line-height:1.25;letter-spacing:-.02em;color:#fff;max-width:26ch;margin:0 auto 28px}
.reco .closing mark{background:none;color:var(--gold)}
@media(max-width:900px){.reco .closing{margin-top:56px;padding-top:40px}}
@media(max-width:768px){.reco-grid{grid-template-columns:1fr}}

/* =========================================================
   ÉCOSYSTÈME
   ========================================================= */
.eco{background:var(--blue-soft)}
.eco h2{max-width:24ch;margin-bottom:16px}
.eco-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:48px}
.eco-list{display:flex;flex-direction:column;gap:0}
.eco-card{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:28px 0;border-top:1px solid var(--line)}
.eco-card:last-child{border-bottom:1px solid var(--line)}
.eco-card .ico{width:56px;height:56px;border-radius:14px;background:var(--blue-soft);display:grid;place-items:center;color:var(--blue)}
.eco-card h3{margin-bottom:6px;color:var(--navy)}
.eco-card p{color:var(--muted);margin-bottom:6px}
.eco-media img{border-radius:20px}
.eco .cta{margin-top:32px}
@media(max-width:900px){.eco-grid{grid-template-columns:1fr}}

/* =========================================================
   TÉMOIGNAGES
   ========================================================= */
.temoignages{background:var(--blue-soft)}
.temoignages .head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.videos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.video{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:var(--navy)}
.video img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.video:hover img{transform:scale(1.04)}
.video .play{position:absolute;inset:0;display:grid;place-items:center}
.video .play i{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.video .play i::after{content:"";border-left:16px solid var(--blue);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.video.big{grid-column:span 2;grid-row:span 2}
.video .cap{position:absolute;left:0;right:0;bottom:0;padding:16px;color:#fff;font-weight:700;background:linear-gradient(0deg,rgba(11,31,68,.9),transparent)}
.tp-head{margin-top:64px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.tp-head h3{color:var(--navy);font-size:1.4rem}
.tp-head p{color:var(--muted)}
.tp-nav{display:flex;gap:8px}
.tp-nav button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--navy);background:#fff;color:var(--navy);font-size:1.4rem;cursor:pointer;line-height:1}
.tp-nav button:hover{background:var(--navy);color:#fff}
.tp-track{margin-top:24px;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.tp-track::-webkit-scrollbar{display:none}
.tp-card{flex:0 0 calc((100% - 32px)/3);scroll-snap-align:start;background:#fff;border-radius:var(--radius);padding:24px;display:flex;flex-direction:column}
.tp-card .stars{color:var(--tp);letter-spacing:2px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.tp-card .stars small{letter-spacing:0;color:var(--muted);font-size:.78rem}
.tp-card h4{font-size:1rem;margin-bottom:8px}
.tp-card p{color:var(--muted);font-size:.95rem;flex:1}
.tp-card footer{margin-top:16px;font-size:.9rem;display:flex;align-items:center;gap:10px}
.tp-card footer i{width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.8rem;flex-shrink:0}
.tp-card footer small{display:block;color:var(--muted);font-size:.78rem}
.tp-link{display:inline-block;margin-top:20px;color:var(--blue);font-weight:700}
@media(max-width:900px){.videos{grid-template-columns:repeat(2,1fr)}.video.big{grid-column:span 2;grid-row:auto}.tp-card{flex-basis:calc((100% - 16px)/2)}}
@media(max-width:600px){.tp-card{flex-basis:88%}}

/* =========================================================
   MON HISTOIRE
   ========================================================= */
.histoire-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.histoire-grid>div:last-child{order:1}
.histoire-video{order:2;position:relative;aspect-ratio:1/1;border-radius:46% 54% 42% 58% / 52% 44% 56% 48%;overflow:hidden;background:var(--navy);box-shadow:0 30px 60px rgba(11,31,68,.18)}
.histoire-video iframe,.histoire-video .video-link{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.histoire-video .video-link img{width:100%;height:100%;object-fit:cover}
.histoire-video .play{position:absolute;inset:0;display:grid;place-items:center}
.histoire-video .play i{width:76px;height:76px;border-radius:50%;background:var(--gold);display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,0,0,.3);transition:transform .2s}
.histoire-video .play i::after{content:"";border-left:24px solid var(--navy);border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px}
.histoire-video .video-link:hover .play i{transform:scale(1.08)}
.histoire p{margin-bottom:16px;color:var(--muted)}
.histoire p strong{color:var(--ink)}
.histoire .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
@media(max-width:900px){.histoire-grid{grid-template-columns:1fr}}

/* =========================================================
   FORMATION OFFERTE
   ========================================================= */
.offerte{margin-top:96px;padding-top:96px;border-top:1px solid rgba(255,255,255,.12);position:relative;z-index:1}
.offerte-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.offerte h2{max-width:20ch}
.offerte p{color:rgba(255,255,255,.75);margin:16px 0 24px;max-width:50ch}
.offerte ul{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.offerte li{display:flex;gap:10px;align-items:flex-start}
.offerte li::before{content:"✓";color:#7FD1A9;font-weight:800;flex-shrink:0}
.form{display:flex;flex-direction:column;gap:10px;max-width:440px}
.form input{width:100%;min-width:0;box-sizing:border-box;padding:14px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:1rem}
.form input::placeholder{color:rgba(255,255,255,.55)}
.form .btn{justify-content:center}
.form small{color:rgba(255,255,255,.5);font-size:.8rem}
@media(max-width:900px){.offerte-grid{grid-template-columns:minmax(0,1fr)}.offerte-grid>*{min-width:0;max-width:100%}.offerte-grid img{width:100%;max-width:460px;order:-1;margin:0 auto}.offerte-grid .wp-block-image{width:100%;max-width:460px;order:-1;margin:0 auto}.offerte p,.offerte h2{max-width:100%}.form{width:100%;max-width:100%}.form input{width:100%;min-width:0}}

/* =========================================================
   ARTICLES
   ========================================================= */
.articles .head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.post{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;display:flex;flex-direction:column}
.post .thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--blue-soft)}
.post .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.post:hover .thumb img{transform:scale(1.04)}
.post .thumb span{position:absolute;top:14px;left:14px;background:#fff;color:var(--navy);font-weight:700;font-size:.8rem;padding:5px 10px;border-radius:999px}
.post .body{padding:22px}
.post h3{font-size:1.1rem;margin-bottom:10px;color:var(--navy)}
.post .more{color:var(--blue);font-weight:700;font-size:.95rem}
@media(max-width:900px){.posts{grid-template-columns:1fr}}

/* =========================================================
   CTA FINAL
   ========================================================= */
.final{background:var(--navy);text-align:center;color:#fff;padding:160px 0 120px}
.final h2{color:#fff}
.final .hl{color:var(--gold)}
.final p{margin:12px auto 28px;max-width:52ch;color:rgba(255,255,255,.75);font-size:1.1rem}
.final .btn-ghost{border-color:#fff;color:#fff}
.final .btn-ghost:hover{background:#fff;color:var(--navy)}
.final .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* =========================================================
   FOOTER
   ========================================================= */
footer.site{background:var(--navy);color:rgba(255,255,255,.8);padding:64px 0 32px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.foot-grid img{height:50px;width:auto;margin-bottom:16px}
.foot-grid h4{color:#fff;font-size:.95rem;margin-bottom:14px}
.foot-grid a{display:block;padding:5px 0;font-size:.95rem}
.foot-grid a:hover{color:#fff}
.social{display:flex;gap:10px;margin-top:16px}
.social a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;padding:0;font-size:.8rem;font-weight:700}
.social a:hover{background:#fff;color:var(--navy)}
.legal{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font-size:.82rem;color:rgba(255,255,255,.5);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* =========================================================
   OFFRE PHARE (inspiré du bloc "Bestseller")
   ========================================================= */
.offre{padding-top:0}
.offre-card{display:grid;grid-template-columns:1fr 1fr;border-radius:24px;overflow:hidden;background:var(--blue-soft);border:1px solid var(--line)}
.offre-card .media{position:relative;min-height:420px;background:var(--navy) url(https://www.agirinvestir.fr/wp-content/uploads/2024/05/remi-1.png) center/cover no-repeat}
.offre-card .tag{position:absolute;top:20px;left:20px;background:var(--gold);color:var(--navy);font-weight:800;font-size:.85rem;padding:6px 12px;border-radius:999px}
.offre-card .body{padding:48px}
.offre-card h2{font-size:clamp(1.5rem,2.4vw,2rem);color:var(--navy);margin-bottom:12px}
.offre-card .body>p{color:var(--muted);margin-bottom:24px}
.inclus{display:grid;gap:12px;margin-bottom:28px}
.inclus li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.inclus li i{width:28px;height:28px;border-radius:50%;background:var(--gold);color:var(--navy);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.85rem}
.inclus li b{display:block;color:var(--navy)}
.inclus li span{color:var(--muted);font-size:.95rem}
.offre-card .actions{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:900px){.offre-card{grid-template-columns:1fr}.offre-card .media{min-height:280px}.offre-card .body{padding:32px 24px}}

/* =========================================================
   CE QUE TU VAS VIVRE + MOSAÏQUE
   ========================================================= */
.vivre-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.vivre p{color:var(--muted);margin-bottom:16px;max-width:52ch}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.pills span{padding:8px 14px;border-radius:999px;background:var(--blue-soft);color:var(--navy);font-weight:600;font-size:.9rem}
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:120px;gap:10px}
.mosaic img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.mosaic .tall{grid-row:span 2}
.mosaic .wide{grid-column:span 2}
.proof{display:flex;align-items:center;gap:16px;margin-top:24px;flex-wrap:wrap}
.proof .avatars{display:flex}
.proof .avatars img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-left:-10px}
.proof .avatars img:first-child{margin-left:0}
.proof b{color:var(--navy)}
.proof small{display:block;color:var(--muted)}
@media(max-width:900px){.vivre-grid{grid-template-columns:1fr}.mosaic{grid-auto-rows:100px}}

/* =========================================================
   POURQUOI IMMO ACADEMY
   ========================================================= */
.pourquoi{background:#fff}
.faq{background:var(--blue-soft)}
.articles{background:var(--blue-soft)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.why{background:#fff;border-radius:var(--radius);padding:28px}
.why i{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--navy);color:var(--gold);margin-bottom:16px;font-style:normal;font-weight:800}
.why h3{color:var(--navy);font-size:1.05rem;margin-bottom:8px}
.why p{color:var(--muted);font-size:.95rem}
@media(max-width:900px){.why-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.why-grid{grid-template-columns:1fr}}

/* =========================================================
   FAQ
   ========================================================= */
.faq-list{max-width:820px;margin:40px auto 0}
.faq-list details{border-top:1px solid var(--line);padding:6px 0}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-weight:700;color:var(--navy);font-size:1.05rem}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-size:1.6rem;font-weight:400;color:var(--blue);flex-shrink:0}
.faq-list details[open] summary::after{content:"–"}
.faq-list details p{color:var(--muted);padding:0 0 20px;max-width:70ch}

/* =========================================================
   RÉSEAUX
   ========================================================= */
.reseaux{padding-top:0}
.reseaux-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.reseau{border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:6px}
.reseau b{font-size:1.8rem;color:var(--navy);letter-spacing:-.02em}
.reseau .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;margin-bottom:10px}
.reseau .ico svg{width:24px;height:24px}
.reseau .yt{background:#FF0000}.reseau .ig{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}.reseau .tt{background:#000}.reseau .fb{background:#1877F2}
.reseau span{color:var(--muted)}
.reseau:hover{border-color:var(--blue)}
@media(max-width:900px){.reseaux-grid{grid-template-columns:1fr}}

/* =========================================================
   MOBILE : les grilles de cartes deviennent des carrousels
   ========================================================= */
@media(max-width:768px){
  .stats-grid,.why-grid,.reseaux-grid,.posts{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;
    scrollbar-width:none;margin:32px -24px 0;padding:0 24px 8px;border-radius:0;
  }
  .stats-grid::-webkit-scrollbar,.videos::-webkit-scrollbar,.why-grid::-webkit-scrollbar,.reseaux-grid::-webkit-scrollbar,.posts::-webkit-scrollbar{display:none}
  .stats-grid>*,.why-grid>*,.reseaux-grid>*,.posts>*{
    flex:0 0 82%;scroll-snap-align:start;grid-column:auto;grid-row:auto;
  }
  .stats-grid{background:none;padding-top:0;margin-top:0}
  .hero-grid>div:first-child{padding-bottom:24px}
  .hero-media{margin:0 auto -1px}
  .stat{background:var(--navy);border-radius:var(--radius);border:0}
  .video{aspect-ratio:16/9}
  .video.big .cap{font-size:.9rem}
  .reco-grid{grid-template-columns:1fr;gap:28px}
  .tp-card{flex-basis:82%}
  .hero h1{font-size:2.2rem}
  .hero .actions .btn{width:100%;justify-content:center}
  .topbar{font-size:.82rem}
  .topbar a{display:block;margin:4px 0 0}
  header{padding:10px 12px 0}
  .nav{height:60px;padding:0 8px 0 16px}
  .logo img{height:34px}
  .eco-media{padding:16px 36px 8px}
  .float-laptop{left:-8%}
  .float-tp{right:-10%}
  .final .actions .btn{width:100%;justify-content:center}
  .foot-grid{gap:28px}
  .legal{flex-direction:column}
  .btn{white-space:normal;text-align:center}
  .reco .closing .btn{width:100%;justify-content:center}
  .histoire .actions .btn,.offerte .form .btn{width:100%;justify-content:center}
}
html,body{overflow-x:clip}

/* =========================================================
   DÉCORS DE FOND (discrets)
   ========================================================= */
section{position:relative;overflow:hidden}
section>.container{position:relative;z-index:1}
.deco{position:absolute;pointer-events:none;z-index:0}
/* Tache douce (blob) */
.deco-blob{border-radius:50%;filter:blur(60px);opacity:.6}
/* Grille de points */
.deco-dots{background-image:radial-gradient(currentColor 1.5px,transparent 1.6px);background-size:22px 22px;opacity:.18}
/* Anneau */
.deco-ring{border-radius:50%;border:2px solid currentColor;opacity:.15}
/* Hero */
.hero .deco-blob.a{width:520px;height:520px;right:-120px;top:-160px;background:var(--blue-soft)}
.hero .deco-blob.b{width:360px;height:360px;left:-140px;bottom:-40px;background:#FFF3D6}
.hero .deco-dots{width:260px;height:200px;left:40px;top:60px;color:var(--blue)}
/* Témoignages */
.temoignages .deco-ring{width:420px;height:420px;right:-160px;top:-180px;color:var(--blue)}
.temoignages .deco-dots{width:220px;height:220px;left:-30px;bottom:40px;color:var(--navy)}
/* Histoire */
.histoire .deco-blob{width:480px;height:480px;right:-160px;top:20%;background:var(--blue-soft)}
.histoire .deco-ring{width:180px;height:180px;right:6%;bottom:8%;color:var(--gold);opacity:.5}
/* Écosystème */
.eco .deco-blob{width:600px;height:600px;right:-200px;bottom:-200px;background:#fff;opacity:.9}
.eco .deco-dots{width:240px;height:240px;left:-40px;top:120px;color:var(--blue)}
/* Sections navy */
.reco .deco-blob,.offerte .deco-blob{filter:blur(90px);opacity:.35}
.reco .deco-blob.a{width:520px;height:520px;right:-160px;top:-200px;background:var(--blue)}
.reco .deco-blob.b{width:380px;height:380px;left:-140px;bottom:-160px;background:var(--gold)}
.reco .deco-dots{width:280px;height:240px;right:8%;bottom:40px;color:#fff;opacity:.12}
.offerte .deco-blob.a{width:560px;height:560px;left:-200px;top:-200px;background:var(--blue)}
.offerte .deco-ring{width:520px;height:520px;right:-200px;bottom:-260px;color:var(--gold);opacity:.25}
/* Pourquoi */
.pourquoi .deco-dots{width:300px;height:260px;right:-20px;top:40px;color:var(--navy)}
.pourquoi .deco-ring{width:260px;height:260px;left:-120px;bottom:-100px;color:var(--blue)}
/* FAQ */
.faq .deco-blob{width:460px;height:460px;left:-180px;top:10%;background:#fff;opacity:.9}
.faq .deco-ring{width:140px;height:140px;right:10%;top:12%;color:var(--gold);opacity:.5}
/* Réseaux */
.reseaux .deco-dots{width:200px;height:160px;right:5%;top:20px;color:var(--blue)}
/* Articles */
.articles .deco-blob{width:500px;height:500px;right:-200px;top:-100px;background:#fff;opacity:.9}
/* CTA final */
.final .deco-blob.a{width:420px;height:420px;left:-120px;top:-160px;background:var(--gold);filter:blur(90px);opacity:.3}
.final .deco-blob.b{width:420px;height:420px;right:-120px;bottom:-200px;background:var(--blue);filter:blur(90px);opacity:.35}
.final .deco-ring{width:600px;height:600px;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;opacity:.08}
@media(max-width:768px){.deco{transform:scale(.6);transform-origin:center}.final .deco-ring{transform:translate(-50%,-50%) scale(.6)}}

/* =========================================================
   ANIMATIONS AU SCROLL
   ========================================================= */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}
.rv-scale{transform:translateY(20px) scale(.96)}
.rv-scale.in{transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* =========================================================
   MUR D'IMAGES EN FONDU (arrière-plan)
   ========================================================= */
.wall{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;perspective:1200px}
.wall .wall-grid{position:absolute;left:50%;width:min(1100px,120vw);display:grid;grid-template-columns:repeat(3,1fr);gap:18px;transform-style:preserve-3d}
.wall .wall-grid img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;opacity:.55;filter:saturate(.85)}
.wall::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--navy) 0%,rgba(11,31,68,.55) 35%,rgba(11,31,68,.75) 70%,var(--navy) 100%)}
/* CTA final : mur incliné qui se fond vers le bas */
.final .wall-grid{top:-40px;transform:translateX(-50%) rotateX(28deg) rotateZ(-4deg) scale(1.05)}
.final .wall::after{background:linear-gradient(180deg,rgba(11,31,68,.35) 0%,rgba(11,31,68,.8) 50%,var(--navy) 100%)}
/* Section freins : mur discret derrière le haut */
.reco .wall-grid{top:-120px;transform:translateX(-50%) rotateX(30deg) scale(1.1)}
.reco .wall-grid img{opacity:.35}
.reco .wall::after{background:linear-gradient(180deg,rgba(11,31,68,.5) 0%,rgba(11,31,68,.85) 40%,var(--navy) 62%)}
@media(max-width:768px){.wall .wall-grid{width:140vw;gap:10px}.wall .wall-grid img{border-radius:8px}.final .wall-grid{top:-20px}.reco .wall-grid{top:-80px}}

/* Témoignages : section navy + mur incliné */
.temoignages{background:var(--navy);color:#fff}
.temoignages h2{color:#fff}
.temoignages .btn-ghost{border-color:#fff;color:#fff}
.temoignages .btn-ghost:hover{background:#fff;color:var(--navy)}
.temoignages .tp-head h3{color:#fff}
.temoignages .tp-head p{color:rgba(255,255,255,.7)}
.temoignages .tp-nav button{border-color:#fff;background:transparent;color:#fff}
.temoignages .tp-nav button:hover{background:#fff;color:var(--navy)}
.temoignages .tp-link{color:var(--gold)}
.temoignages .tp-card{color:var(--ink)}
.temoignages .hl,.temoignages .kicker{color:var(--gold)}
.temoignages .deco-ring{color:#fff}.temoignages .deco-dots{color:#fff}
.wall-stage{display:block;position:relative;height:640px;margin-top:48px;overflow:hidden;perspective:1100px;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 78%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 78%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
.wall-track{position:absolute;left:50%;top:0;width:min(1180px,125vw);transform:translateX(-50%) rotateX(14deg) rotateZ(-1.5deg) scale(1.02);transform-style:preserve-3d;animation:wallScroll 51s linear infinite}
.wall-stage:hover .wall-track{animation-play-state:paused}
.wall-stage .wall-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:22px;transform-style:preserve-3d}
@keyframes wallScroll{from{transform:translateX(-50%) rotateX(14deg) rotateZ(-1.5deg) scale(1.02) translateY(0)}to{transform:translateX(-50%) rotateX(14deg) rotateZ(-1.5deg) scale(1.02) translateY(-50%)}}
@media(prefers-reduced-motion:reduce){.wall-track{animation:none}}

.wall-stage .wall-grid .wall-card,.vid-grid .wall-card,.bento .wall-card{position:relative;display:block;border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.35);transition:transform .3s}
.wall-stage .wall-grid .wall-card:hover{transform:translateZ(30px) scale(1.04);z-index:2}
.wall-stage .wall-grid img,.vid-grid .wall-card img,.bento .wall-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;opacity:1}
.wall-stage .wall-grid .play,.vid-grid .play,.bento .play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .25s;background:rgba(11,31,68,.25)}
.wall-stage .wall-grid .wall-card:hover .play,.vid-grid .wall-card:hover .play,.bento .wall-card:hover .play{opacity:1}
.wall-stage .wall-grid .play i,.vid-grid .play i,.bento .play i{width:56px;height:56px;border-radius:50%;background:var(--gold);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.wall-stage .wall-grid .play i::after,.vid-grid .play i::after,.bento .play i::after{content:"";border-left:18px solid var(--navy);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}
.wall-name{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:#fff;font-weight:700;font-size:1rem;background:linear-gradient(0deg,rgba(11,31,68,.92),transparent);z-index:2}
.wall-name small{display:block;font-weight:500;font-size:.8rem;color:rgba(255,255,255,.75)}
@media(max-width:768px){.wall-stage{height:420px;margin:32px -24px 0}.wall-track{width:150vw}.wall-stage .wall-grid{gap:12px;margin-bottom:12px}.wall-stage .wall-grid .wall-card{border-radius:10px}.wall-stage .wall-grid .play{opacity:1;background:none}.wall-stage .wall-grid .play i{width:40px;height:40px}.wall-stage .wall-grid .play i::after{border-left-width:13px;border-top-width:8px;border-bottom-width:8px}}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== IMMO ACADEMY : styles spécifiques ===== */
.ia-hero{margin-top:-96px;padding:170px 0 0;overflow:hidden;background:linear-gradient(180deg,var(--navy) 0%,#0E2752 100%);color:#fff;position:relative}
.ia-hero h1{color:#fff;max-width:16ch}
.ia-hero .hl{color:var(--gold)}
.ia-hero .lead{color:rgba(255,255,255,.78)}
.ia-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:end;padding-bottom:0}
.ia-hero-grid>div:first-child{padding-bottom:88px}
.ia-hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 18px}
.ia-hero .note{font-size:.92rem;color:rgba(255,255,255,.6)}
.ia-hero .btn-ghost{border-color:#fff;color:#fff}
.ia-hero .btn-ghost:hover{background:#fff;color:var(--navy)}
.ia-logo{height:58px;width:auto;margin-bottom:26px;filter:brightness(0) invert(1)}
.ia-hero-media{position:relative}
.ia-hero-media::before{content:"";position:absolute;inset:-12% -18%;background:radial-gradient(55% 55% at 40% 35%,rgba(30,91,255,.5),transparent 70%),radial-gradient(45% 45% at 80% 80%,rgba(246,190,70,.35),transparent 70%);filter:blur(50px)}
.ia-hero-media img{position:relative;width:112%;max-width:none;margin:0 0 -1px -6%;display:block}
.ia-trust{display:inline-flex;align-items:center;gap:10px;margin-top:8px;color:rgba(255,255,255,.8);font-size:.95rem}
.ia-trust .stars{color:var(--tp);letter-spacing:2px}
@media(max-width:900px){.ia-hero{margin-top:-80px;padding-top:120px}.ia-hero-grid{grid-template-columns:1fr;gap:24px;padding-bottom:0}.ia-hero-grid>div:first-child{padding-bottom:24px}.ia-hero-media img{width:100%;margin-left:0}.ia-hero .actions .btn{width:100%;justify-content:center}}

/* Ancres de section */
.anchors{position:sticky;top:92px;z-index:39;pointer-events:none;margin-top:-32px;padding-bottom:0;background:linear-gradient(180deg,var(--navy) 0%,var(--navy) 50%,var(--blue-soft) 50%,var(--blue-soft) 100%)}
.anchors ul{pointer-events:auto;scroll-margin-top:160px;display:flex;gap:4px;justify-content:center;flex-wrap:wrap;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.7);box-shadow:0 10px 30px rgba(11,31,68,.1);border-radius:999px;padding:6px;max-width:max-content;margin:0 auto}
.anchors a{display:block;padding:9px 16px;border-radius:999px;font-weight:600;font-size:.92rem;color:var(--ink)}
.anchors a:hover{background:var(--blue-soft);color:var(--blue)}
@media(max-width:768px){.anchors{position:static}.anchors ul{overflow-x:auto;flex-wrap:nowrap;max-width:100%;justify-content:flex-start;scrollbar-width:none}.anchors ul::-webkit-scrollbar{display:none}}

/* Référence */
.ref{background:var(--blue-soft);padding-top:72px}
.ref-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ref p{color:var(--muted);margin-bottom:14px;max-width:54ch}
.ref-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}
.ref-fact{background:#fff;border-radius:14px;padding:20px}
.ref-fact b{display:block;font-size:1.8rem;color:var(--navy);letter-spacing:-.02em;line-height:1.1}
.ref-fact span{color:var(--muted);font-size:.92rem}
@media(max-width:900px){.ref-grid{grid-template-columns:1fr}}

/* Avantages */
.av-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 48px;margin-top:48px}
.av h3{color:var(--navy);margin:16px 0 8px}
.av p{color:var(--muted)}
.av i{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--gold);color:var(--navy)}
.av i svg{width:26px;height:26px}
.center-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:56px}
@media(max-width:900px){.av-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:600px){.av-grid{grid-template-columns:1fr}.center-cta .btn{width:100%;justify-content:center}}

/* Témoignages vidéo */
.itw{background:var(--navy);color:#fff}
.itw h2{color:#fff}.itw .hl{color:var(--gold)}
.itw .lead{color:rgba(255,255,255,.72)}
.itw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.itw-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden;display:block;transition:transform .25s,border-color .25s}
.itw-card:hover{transform:translateY(-4px);border-color:rgba(246,190,70,.6)}
.itw-card .thumb{position:relative;aspect-ratio:9/13;background:#0a1832;overflow:hidden}
.itw-card .thumb img{width:100%;height:100%;object-fit:cover}
.itw-card .play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(0deg,rgba(11,31,68,.75),transparent 55%)}
.itw-card .play i{width:56px;height:56px;border-radius:50%;background:var(--gold);display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.itw-card .play i::after{content:"";border-left:18px solid var(--navy);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}
.itw-card .name{position:absolute;left:0;right:0;bottom:0;padding:18px;font-weight:700;font-size:1.05rem}
.itw-card .name small{display:block;font-weight:500;color:rgba(255,255,255,.7);font-size:.85rem}
.itw .map{margin-top:32px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.itw .map iframe{display:block;width:100%;height:440px;border:0;filter:saturate(.9)}
@media(max-width:900px){.itw-grid{grid-template-columns:repeat(2,1fr);gap:14px}.itw .map iframe{height:320px}}
@media(max-width:600px){.itw-grid{grid-template-columns:1fr 1fr}.itw-card .name{padding:12px;font-size:.92rem}}

/* Experts */
.exp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:48px}
.exp{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 22px}
.exp .av-ini{width:64px;height:64px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;font-weight:800;font-size:1.5rem;margin-bottom:18px}
.exp h3{color:var(--navy);font-size:1.1rem}
.exp .role{color:var(--blue);font-weight:700;font-size:.9rem;margin-bottom:12px;display:block}
.exp p{color:var(--muted);font-size:.93rem}
@media(max-width:1100px){.exp-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.exp-grid{grid-template-columns:1fr}}

/* Programme */
.prog{background:var(--blue-soft)}
.prog-list{max-width:920px;margin:48px auto 0}
.prog-list details{background:#fff;border-radius:14px;margin-bottom:12px;overflow:hidden;border:1px solid var(--line)}
.prog-list summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:16px;padding:22px 24px;font-weight:700;color:var(--navy)}
.prog-list summary::-webkit-details-marker{display:none}
.prog-list summary em{font-style:normal;flex-shrink:0;width:38px;height:38px;border-radius:10px;background:var(--navy);color:var(--gold);display:grid;place-items:center;font-size:.9rem;font-weight:800}
.prog-list summary span{flex:1}
.prog-list summary small{display:block;font-weight:500;color:var(--muted);font-size:.85rem;margin-top:2px}
.prog-list summary::after{content:"+";font-size:1.6rem;font-weight:400;color:var(--blue)}
.prog-list details[open] summary::after{content:"–"}
.prog-list ul{padding:0 24px 24px 78px;display:grid;gap:8px}
.prog-list li{color:var(--muted);position:relative;padding-left:18px;font-size:.95rem}
.prog-list li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.prog-list li ul{padding:10px 0 0 0}
.brochure{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;max-width:920px;margin:56px auto 0;background:var(--navy);color:#fff;border-radius:22px;padding:40px}
.brochure h3{color:#fff;font-size:1.5rem;margin-bottom:12px}
.brochure p{color:rgba(255,255,255,.75);margin-bottom:22px}
.brochure img{width:100%}
@media(max-width:900px){.brochure{grid-template-columns:1fr;padding:28px 24px}.brochure .btn{width:100%;justify-content:center}}

/* Programmes PDF */
.pdf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.pdf{border:1px solid var(--line);border-radius:18px;padding:28px;background:#fff;display:flex;flex-direction:column}
.pdf.hot{border-color:var(--gold);box-shadow:0 14px 40px rgba(246,190,70,.18)}
.pdf .tag{align-self:flex-start;background:var(--gold);color:var(--navy);font-weight:800;font-size:.78rem;padding:5px 12px;border-radius:999px;margin-bottom:14px}
.pdf h3{color:var(--navy);margin-bottom:6px}
.pdf .dur{color:var(--blue);font-weight:700;margin-bottom:18px;display:block}
.pdf dl{display:grid;gap:10px;margin-bottom:22px;flex:1}
.pdf dl div{display:flex;justify-content:space-between;gap:12px;font-size:.93rem;border-bottom:1px solid var(--line);padding-bottom:8px}
.pdf dt{color:var(--muted)}.pdf dd{color:var(--navy);font-weight:700}
.pdf .btn{justify-content:center}
.pdf-note{margin-top:24px;font-size:.85rem;color:var(--muted);text-align:center}
@media(max-width:900px){.pdf-grid{grid-template-columns:1fr}}

/* Pourquoi nous rejoindre */
.join{background:var(--navy);color:#fff}
.join h2{color:#fff}.join .hl{color:var(--gold)}
.join-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:48px}
.join-item i{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--gold);color:var(--navy);margin-bottom:18px}
.join-item i svg{width:26px;height:26px}
.join-item h3{color:#fff;margin-bottom:10px}
.join-item p{color:rgba(255,255,255,.72);margin-bottom:12px;font-size:.97rem}
@media(max-width:900px){.join-grid{grid-template-columns:1fr;gap:36px}}

/* FAQ */
.faq{background:#fff}
section[id]{scroll-margin-top:150px}
.faq-list{max-width:860px;margin:48px auto 0}
.faq-list details{border-top:1px solid var(--line);padding:6px 0}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-weight:700;color:var(--navy);font-size:1.05rem}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-size:1.6rem;font-weight:400;color:var(--blue);flex-shrink:0}
.faq-list details[open] summary::after{content:"–"}
.faq-list details p{color:var(--muted);padding:0 0 22px;max-width:72ch}



/* ===== Experts : rail horizontal type carrousel ===== */
.experts{background:var(--navy);color:#fff;overflow:hidden}
.experts h2{color:#fff}.experts .hl{color:var(--gold)}
.experts .lead{color:rgba(255,255,255,.72)}
.experts .kicker{color:var(--gold)}
.experts .btn-ghost,.itw .btn-ghost,.join .btn-ghost{border-color:#fff;color:#fff}
.experts .btn-ghost:hover,.itw .btn-ghost:hover,.join .btn-ghost:hover{background:#fff;color:var(--navy)}
.exp-rail-wrap{position:relative;margin-top:48px}
.exp-rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:10px max(24px,calc((100vw - 1180px)/2)) 20px}
.exp-rail::-webkit-scrollbar{display:none}
.expert{position:relative;flex:0 0 clamp(240px,26vw,320px);aspect-ratio:3/4;scroll-snap-align:center;border-radius:22px;overflow:hidden;background:linear-gradient(160deg,#16305e,#0a1832);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.expert-initial{position:absolute;inset:0;display:grid;place-items:center;font-size:5rem;font-weight:800;color:rgba(255,255,255,.12)}
.expert img{position:relative;z-index:1;object-position:center top}
.expert img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.expert:hover img{transform:scale(1.05)}
.expert::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(6,18,42,.55),transparent 55%);opacity:0;transition:opacity .35s}
.expert:hover::after{opacity:1}
.expert-body{position:absolute;z-index:2;inset:auto 0 0 0;padding:24px 22px;background:linear-gradient(0deg,rgba(6,18,42,.96) 30%,rgba(6,18,42,.75) 60%,transparent);transition:padding .35s}
.expert h3{color:#fff;font-size:1.5rem;margin-bottom:2px}
.expert .role{color:var(--gold);font-weight:600;display:block;margin-bottom:0}
.expert p{color:rgba(255,255,255,.85);font-size:.93rem;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .35s ease,margin .35s}
.expert:hover p,.expert:focus-within p{max-height:280px;opacity:1;margin-top:12px}
.exp-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:48px;height:48px;border-radius:50%;border:0;background:#fff;color:var(--navy);font-size:1.6rem;line-height:1;cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.3);display:grid;place-items:center}
.exp-nav:hover{background:var(--gold)}
.exp-nav.prev{left:max(12px,calc((100vw - 1180px)/2 - 60px))}
.exp-nav.next{right:max(12px,calc((100vw - 1180px)/2 - 60px))}
@media(max-width:1300px){.exp-nav.prev{left:10px}.exp-nav.next{right:10px}}
@media(max-width:768px){
  .exp-rail{padding:10px 24px 20px;gap:14px}
  .expert{flex-basis:76vw}
  .expert p{max-height:280px;opacity:1;margin-top:12px}
  .exp-nav{display:none}
}

/* ===== Décors page IMMO ACADEMY ===== */
.ia-hero .deco-blob.a{width:560px;height:560px;right:-180px;top:-200px;background:var(--blue);filter:blur(90px);opacity:.35}
.ia-hero .deco-blob.b{width:420px;height:420px;left:-160px;bottom:-140px;background:var(--gold);filter:blur(100px);opacity:.22}
.ia-hero .deco-dots{width:260px;height:220px;left:30px;top:120px;color:#fff;opacity:.12}
.ref .deco-blob{width:600px;height:600px;left:-200px;bottom:-220px;background:#fff;opacity:.9;filter:blur(60px)}
.ref .deco-ring{width:200px;height:200px;right:6%;top:12%;color:var(--gold);opacity:.4}
#avantages .deco-dots{width:280px;height:240px;right:-20px;top:60px;color:var(--blue)}
#avantages .deco-blob{width:460px;height:460px;left:-180px;bottom:-160px;background:var(--blue-soft);filter:blur(60px);opacity:.8}
.itw .deco-ring{width:420px;height:420px;right:-160px;top:-160px;color:#fff;opacity:.12}
.itw .deco-blob{width:480px;height:480px;left:-180px;bottom:-180px;background:var(--blue);filter:blur(100px);opacity:.3}
.experts .deco-blob{width:520px;height:520px;right:-180px;top:-180px;background:var(--gold);filter:blur(110px);opacity:.2}
.experts .deco-dots{width:240px;height:200px;left:4%;bottom:40px;color:#fff;opacity:.1}
.prog .deco-dots{width:300px;height:260px;left:-30px;top:80px;color:var(--navy)}
.prog .deco-blob{width:520px;height:520px;right:-200px;bottom:-180px;background:#fff;opacity:.9;filter:blur(60px)}
.pdfs{margin-top:96px;padding-top:72px;border-top:1px solid var(--line);position:relative;z-index:1}
@media(max-width:768px){.pdfs{margin-top:64px;padding-top:48px}}
.join .deco-blob.a{width:560px;height:560px;left:-200px;top:-200px;background:var(--blue);filter:blur(100px);opacity:.32}
.join .deco-dots{width:280px;height:240px;right:6%;bottom:40px;color:#fff;opacity:.12}
.faq .deco-ring{width:420px;height:420px;left:-160px;top:10%;color:var(--blue);opacity:.14}
.faq .deco-blob{width:420px;height:420px;right:-160px;bottom:-160px;background:var(--blue-soft);filter:blur(60px);opacity:.9}

.av-sec{background:var(--navy);color:#fff}
.av-sec h2{color:#fff}.av-sec .hl{color:var(--gold)}
.av-sec .kicker{color:var(--gold)}
.av-sec .av h3{color:#fff}
.av-sec .av p{color:rgba(255,255,255,.72)}
.av-sec .btn-ghost{border-color:#fff;color:#fff}
.av-sec .btn-ghost:hover{background:#fff;color:var(--navy)}
#avantages .deco-dots{color:#fff;opacity:.12}
#avantages .deco-blob{background:var(--blue);filter:blur(100px);opacity:.3}

.itw{background:var(--blue-soft);color:var(--ink)}
.itw h2{color:var(--navy)}.itw .hl{color:var(--blue)}
.itw .kicker{color:var(--blue)}
.itw .lead{color:var(--muted)}
.itw .btn-ghost{border-color:var(--navy);color:var(--navy)}
.itw .btn-ghost:hover{background:var(--navy);color:#fff}
.itw .map{border-color:var(--line)}
.itw .deco-ring{color:var(--blue);opacity:.16}
.itw .deco-blob{background:#fff;opacity:.9;filter:blur(60px)}

/* Menu contextuel : principal sur l'accueil, IMMO ACADEMY sur la page programme */
.menu-ia,.logo-ia,.mm-ia{display:none}
body.on-ia .menu-main,body.on-ia .mm-main{display:none}
body.on-ia .menu-ia{display:flex}
body.on-ia .nav-actions .login{display:none}
body.on-ia .menu-ia>li>a{font-size:.92rem;padding:10px 10px}
body.on-ia .mm-ia{display:block}
body.on-ia .logo-main{display:none}
body.on-ia .logo-ia{display:block;height:34px;width:auto}
.anchors{display:none}
/* .anchors : masquée comme dans la maquette (doublon du menu IA de l'en-tête).
   Pour l'afficher : body.on-ia .anchors{display:block} */

/* (routeur multi-pages retiré : WordPress gère les pages) */


/* utilitaire ajouté à l’intégration WordPress (remplace un style inline non convertible en bloc) */
.tac{text-align:center}

/* ===============================================================
   Images éditables (blocs core/image)
   ---------------------------------------------------------------
   WordPress enveloppe chaque image dans <figure class="wp-block-image">.
   Les classes de la maquette sont portées par ce figure (c'est lui
   l'élément de mise en page) ; les règles « conteneur img » continuent
   de viser l'<img> à l'intérieur. On règle ici les deux cas où l'image
   interne doit remplir son figure.
   =============================================================== */
.wp-block-image.hero-photo img,
.wp-block-image.float img{width:100%;height:auto}
.wp-block-image.phone-img img{width:100%;height:100%;object-fit:cover;object-position:top}
.wp-block-image.ia-logo img{height:100%;width:auto}

/* Figures qui doivent remplir un parent de hauteur imposée.
   Pas de z-index sur la vignette « Mon histoire » : la pastille « play »,
   qui la suit dans le DOM, doit rester au-dessus (comme dans la maquette). */
.histoire-video .video-link .wp-block-image{position:absolute;inset:0}
.expert .wp-block-image{position:absolute;inset:0;z-index:1}

/* Cartes vidéo : lien superposé à la carte (l'image reste sélectionnable
   dans l'éditeur, le clic ouvre la vidéo côté visiteur). */
.wall-link{position:absolute;inset:0;z-index:3}

/* =========================================================
   PAGE À PROPOS
   Composée avec les composants existants (.container, .kicker,
   .hl, .lead, .pills, .inclus, .offerte, .form, .reseaux, .final).
   Seuls les gabarits de lecture ci-dessous lui sont propres.
   ========================================================= */
/* Les décors (.deco) débordent volontairement du conteneur : ces sections
   doivent les rogner. On utilise overflow:clip et non hidden — clip rogne sans
   créer de conteneur de défilement, ce qui laisse fonctionner le visuel collant
   des sections « récit » (hidden le bloquerait). */
.about-story,.about-immo,.about-bref,.about-objectif,.about-offerte{overflow:clip;position:relative}

.about-hero,.hero-simple{padding-bottom:96px}
.about-hero .hero-grid,.hero-simple .hero-grid{align-items:center}
.about-hero .hero-grid>div:first-child,.hero-simple .hero-grid>div:first-child{padding-bottom:0}

/* Récit : le texte occupe une seule colonne continue, le visuel l'accompagne
   en restant collé pendant le défilement. */
.about-split{display:grid;grid-template-columns:.8fr 1fr;gap:64px;align-items:start}
.about-split.right{grid-template-columns:1fr .8fr}
.about-split p{margin-bottom:16px;color:var(--muted)}
.about-split p strong{color:var(--ink)}
.about-media{position:sticky;top:120px}
.about-story .deco-blob{width:480px;height:480px;right:-160px;top:18%;background:var(--blue-soft)}
.about-story .deco-ring{width:180px;height:180px;right:6%;bottom:8%;color:var(--gold);opacity:.5}

/* Traitements photo : blob organique (comme « Mon histoire » de l'accueil)
   et cadre arrondi. */
.about-blob{position:relative;aspect-ratio:1/1;border-radius:46% 54% 42% 58% / 52% 44% 56% 48%;overflow:hidden;background:var(--navy);box-shadow:0 30px 60px rgba(11,31,68,.18)}
.about-blob .wp-block-image{position:absolute;inset:0}
.about-blob img{width:100%;height:100%;object-fit:cover}
.about-frame{border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 60px rgba(11,31,68,.18)}
/* Portrait « En bref » : le fichier pp-rr.png embarque un liseré vert de 8px
   le long de son bord. On masque l'image en ellipse et on l'agrandit très
   légèrement pour que ce liseré tombe hors du cadre. */
.about-avatar{border-radius:50%;overflow:hidden}
.about-avatar img{width:100%;display:block;transform:scale(1.04)}
.about-frame img{width:100%;display:block}

/* Puce des listes « .inclus » générée en CSS : les listes restent ainsi de
   vrais blocs « Liste » éditables, sans élément d'icône dans le markup. */
.inclus li::before{content:"✓";width:28px;height:28px;border-radius:50%;background:var(--gold);color:var(--navy);display:grid;place-items:center;font-weight:800;font-size:.85rem}

.about-immo{background:var(--blue-soft)}
.about-immo .deco-blob{width:520px;height:520px;right:-200px;top:-140px;background:#fff;opacity:.9}
.about-immo .deco-dots{width:240px;height:220px;left:-40px;bottom:80px;color:var(--blue)}

.about-bref{background:var(--navy);color:#fff}
.about-bref h2{color:#fff}
.about-bref .inclus{gap:16px}
.about-bref .inclus li{color:#fff;font-weight:600}
.about-bref .deco-blob{width:560px;height:560px;left:-200px;top:-180px;background:var(--blue);filter:blur(100px);opacity:.32}
.about-bref .deco-dots{width:280px;height:240px;right:6%;bottom:40px;color:#fff;opacity:.12}

.about-objectif .inclus{gap:16px;max-width:620px;margin:32px auto 0;text-align:left}
.about-objectif .inclus li{color:var(--navy);font-weight:600}
/* p.lead a un max-width (56ch) : on le recentre et on l'élargit, sinon la
   phrase se coupe avant le « : » (espace insécable de la typographie française) */
.about-objectif .lead{max-width:74ch;margin-inline:auto}
.about-objectif .about-end{margin-top:36px}
.about-bref h2{margin-bottom:24px}
.about-objectif .deco-ring{width:180px;height:180px;right:8%;top:14%;color:var(--gold);opacity:.5}
.about-sign{margin-top:28px;font-weight:800;color:var(--navy)}

.about-offerte{background:var(--navy);color:#fff}
.about-offerte .offerte{margin-top:0;padding-top:0;border-top:0}

.about-reseaux{padding-top:96px}

@media(max-width:900px){
  .about-split,.about-split.right{grid-template-columns:1fr;gap:40px}
  .about-media{position:static}
  .about-hero,.hero-simple{padding-bottom:64px}
}

/* =========================================================
   PAGE TÉMOIGNAGES
   Cartes vidéo du thème (.wall-card/.play/.wall-name) réutilisées
   dans une mosaïque « bento » et une grille régulière.
   ========================================================= */
.avis-hero,.temoins,.interviews,.avis{overflow:clip;position:relative}

/* Intitulés de section en capitales, comme la maquette de référence */
.avis-hero .kicker,.temoins .kicker,.interviews .kicker,.avis .kicker{
  text-transform:uppercase;letter-spacing:.09em;font-size:.78rem}

/* Ancres de navigation du hero */
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.chip{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;
  background:#fff;border:1px solid var(--line);font-weight:700;color:var(--navy);
  box-shadow:0 10px 26px rgba(11,31,68,.07);transition:border-color .2s,color .2s,transform .2s}
.chip:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.chip svg{width:18px;height:18px;flex-shrink:0;color:var(--blue)}
.chip.is-gold{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.chip.is-gold svg{color:var(--navy)}
.chip.is-gold:hover{background:var(--gold-dark);border-color:var(--gold-dark);color:var(--navy)}
.avis-hero .tp-widget-badge{margin-top:22px;max-width:320px}

/* Mosaïque des parcours : 4 colonnes ; 3 vignettes mises en avant occupent
   2x2, alternées gauche / droite / gauche. Une seule grille, pour n'avoir
   qu'un seul carrousel sur mobile. */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px;grid-auto-flow:row dense}
.bento .wall-card img{height:100%}
.bento .big img{aspect-ratio:auto}
/* Les vignettes mises en avant sont repérées par leur classe, pas par leur
   rang : ajouter une vidéo ne décale plus la mosaïque. Le placement dense
   comble les trous laissés par les blocs 2x2. */
.bento>.big{grid-column:span 2;grid-row:span 2}

/* Grille régulière des interviews */
.vid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.vid-grid .wall-card:hover,.bento .wall-card:hover{transform:translateY(-6px);z-index:2}

/* Bouton de lecture : blanc et toujours visible */
.vid-grid .play,.bento .play{opacity:1;background:none}
.vid-grid .play i,.bento .play i{background:rgba(255,255,255,.94);box-shadow:0 10px 26px rgba(0,0,0,.28);transition:transform .25s}
.vid-grid .play i::after,.bento .play i::after{border-left-color:var(--navy)}
.vid-grid .wall-card:hover .play i,.bento .wall-card:hover .play i{transform:scale(1.1)}

/* Durée, en bas à droite de la vignette */
.vid-time{position:absolute;right:10px;bottom:10px;z-index:3;padding:4px 9px;border-radius:8px;
  background:rgba(11,31,68,.82);color:#fff;font-weight:700;font-size:.78rem;letter-spacing:.01em}
/* Prénom et âge sur une seule ligne, en bas à gauche */
.vid-grid .wall-name{padding:12px 84px 12px 14px}
.vid-grid .wall-name small{display:inline;margin-left:7px;font-size:.82rem}

.temoins{background:var(--blue-soft)}
.temoins .deco-blob{width:520px;height:520px;left:-200px;top:-140px;background:#fff;opacity:.9}
.temoins .deco-dots{width:240px;height:220px;right:-30px;bottom:60px;color:var(--blue)}
.interviews{background:var(--navy);color:#fff}
.interviews h2{color:#fff}
.interviews .lead{color:rgba(255,255,255,.72)}
.interviews .kicker{color:var(--gold)}
.interviews .deco-blob{width:560px;height:560px;right:-200px;top:-180px;background:var(--blue);filter:blur(100px);opacity:.32}
.interviews .deco-dots{width:280px;height:240px;left:4%;bottom:40px;color:#fff;opacity:.12}
.avis .deco-ring{width:420px;height:420px;left:-160px;top:12%;color:var(--blue);opacity:.14}
.avis .tp-widget-badge{margin:0 auto;max-width:320px}
/* Le widget Trustpilot rend autant de rangées que sa hauteur le permet, et la
   dernière se retrouvait tranchée en plein milieu. On le laisse générer large
   et on le rogne proprement ici, avec un fondu et un lien « voir tous ». */
.tp-widget{position:relative;margin-top:36px;max-height:1400px;overflow:hidden}
.tp-widget::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 82%);pointer-events:none}
.avis .tp-link{display:block;text-align:center;margin-top:18px;color:var(--blue);font-weight:700}
.avis .tp-link:hover{text-decoration:underline}
@media(max-width:900px){.tp-widget{max-height:1600px}}

@media(max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-flow:row}
  .bento>.big{grid-column:span 2;grid-row:auto}
  .bento .big img{aspect-ratio:16/9}
  .vid-grid{grid-template-columns:repeat(2,1fr);gap:14px}
}

/* Mobile : les deux grilles de vidéos deviennent des carrousels horizontaux,
   comme les autres grilles de cartes du thème. Ce bloc doit rester APRÈS les
   règles .bento / .vid-grid ci-dessus, sinon display:grid l'emporterait. */
@media(max-width:768px){
  .bento,.vid-grid{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;
    scrollbar-width:none;margin:32px -24px 0;padding:0 24px 10px;
    /* sans cela, l'accroche aligne la vignette sur le bord du conteneur
       en ignorant le padding : la première carte se colle à l'écran */
    scroll-padding-inline:24px;
  }
  .bento::-webkit-scrollbar,.vid-grid::-webkit-scrollbar{display:none}
  .bento>*,.vid-grid>*{flex:0 0 82%;scroll-snap-align:start;grid-area:auto}
  .bento .wall-card img,.vid-grid .wall-card img{aspect-ratio:16/9;height:auto}
}

/* =========================================================
   PAGE CONTACT
   Réutilise les cartes .why du thème, rendues cliquables.
   ========================================================= */
.contact-hero,.contact{overflow:clip;position:relative}
.contact-hero .kicker,.contact .kicker{text-transform:uppercase;letter-spacing:.09em;font-size:.78rem}
.contact-photo{width:100%;max-width:420px;margin-left:auto;display:block}
.contact-hero .hero-media{align-self:center;margin-bottom:0}

.contact{background:var(--blue-soft)}
.contact .deco-blob{width:520px;height:520px;right:-200px;top:-160px;background:#fff;opacity:.9}
.contact .deco-dots{width:240px;height:220px;left:-40px;bottom:60px;color:var(--blue)}
.contact .why{position:relative;transition:transform .25s,box-shadow .25s}
.contact .why:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(11,31,68,.10)}
.contact .why i svg{width:22px;height:22px}
.contact .why p{margin-bottom:0}
.contact .why-value{display:block;margin-top:10px;color:var(--blue);font-weight:700}
.contact .why-link{position:absolute;inset:0;z-index:2}
/* Flèche d'affordance : la carte entière est un lien */
.contact .why::after{content:"→";position:absolute;right:22px;top:26px;color:var(--line);
  font-weight:800;font-size:1.1rem;transition:color .25s,transform .25s}
.contact .why:hover::after{color:var(--blue);transform:translateX(4px)}
@media(max-width:900px){.why-grid{grid-template-columns:1fr}}

/* =========================================================
   PAGES RESSOURCES (formation offerte, guides, calculateur)
   Gabarit court : en-tête épuré, une offre, un appel à l'action.
   ========================================================= */
.lp-header{background:var(--navy);padding:30px 16px;text-align:center}
.lp-header img{height:40px;width:auto;display:inline-block;filter:brightness(0) invert(1);opacity:.92}
.lp{background:var(--navy);color:#fff;overflow:clip;position:relative;padding-top:24px}
.lp .offerte{margin-top:0;padding-top:0;border-top:0}
.lp h1{color:#fff;max-width:20ch;font-size:clamp(2rem,3.4vw,3rem)}
.lp .hl{color:var(--gold)}
.lp .offerte-grid{align-items:center}
.lp .lp-note{color:rgba(255,255,255,.55);font-size:.85rem;margin-top:14px}
.lp .actions{margin-top:28px}
.lp-mockup img{width:100%;display:block;filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}
.lp-footer{background:#08162f;color:rgba(255,255,255,.5);padding:40px 0;font-size:.8rem;text-align:center}
.lp-footer a{color:rgba(255,255,255,.72);text-decoration:underline}
.lp-footer .legal-links{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-bottom:18px;font-size:.85rem}
.lp-footer p{max-width:900px;margin:0 auto;line-height:1.65}
@media(max-width:900px){.lp .offerte-grid{grid-template-columns:1fr;gap:36px}.lp-mockup{order:-1;max-width:420px;margin:0 auto}}

/* =========================================================
   BLOG : liste d'articles et page d'article
   Réutilise les cartes .post / .thumb / .more du thème.
   ========================================================= */
.blog{background:var(--blue-soft);overflow:clip;position:relative}
.blog .deco-blob{width:520px;height:520px;right:-200px;top:-150px;background:#fff;opacity:.9}
.blog .deco-dots{width:240px;height:220px;left:-40px;bottom:60px;color:var(--blue)}
.blog .kicker{text-transform:uppercase;letter-spacing:.09em;font-size:.78rem}
.blog .wp-block-query{margin-top:8px}

/* La boucle : <ul class="wp-block-post-template posts">, chaque <li> porte
   déjà la classe "post" ajoutée par WordPress. */
.posts{list-style:none;padding:0}
.post{position:relative;transition:transform .25s,box-shadow .25s}
.post:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(11,31,68,.10)}
.post .thumb{margin:0}
.post .thumb a{display:block;height:100%}
.post .body{display:flex;flex-direction:column;flex:1;gap:10px}
.post .meta{color:var(--muted);font-size:.85rem;font-weight:600}
.post h3{margin:0}
.post h3 a{color:var(--navy)}
.post h3 a:hover{color:var(--blue)}
.post .wp-block-post-excerpt{margin:0;flex:1}
.post .wp-block-post-excerpt p{color:var(--muted);font-size:.95rem;margin:0}
.post .more{margin-top:4px;align-self:flex-start}
.post .more:hover{text-decoration:underline}

.pagination{margin-top:44px;gap:8px;flex-wrap:wrap}
.pagination a,.pagination span{padding:9px 14px;border-radius:10px;border:1px solid var(--line);
  background:#fff;color:var(--navy);font-weight:700;font-size:.92rem}
.pagination .current{background:var(--navy);border-color:var(--navy);color:#fff}
.pagination a:hover{border-color:var(--blue);color:var(--blue)}

/* Page d'article */
.article{overflow:clip;position:relative;padding-bottom:0}
.article .deco-blob{width:480px;height:480px;right:-180px;top:-120px;background:var(--blue-soft)}
.article-head{max-width:820px}
.article-head .meta{color:var(--muted);font-weight:600;font-size:.9rem;margin-bottom:12px}
.article-head h1{color:var(--navy)}
.article-cover{max-width:1180px;margin:44px auto 0;padding:0 24px}
.article-cover img{width:100%;border-radius:var(--radius);display:block}
.article-body{max-width:820px;margin-top:44px;padding-bottom:96px}
.article-body h2{font-size:1.6rem;margin:36px 0 14px;color:var(--navy)}
.article-body h3{font-size:1.2rem;margin:28px 0 10px;color:var(--navy)}
.article-body p{margin-bottom:16px;color:var(--muted)}
.article-body p strong,.article-body li strong{color:var(--ink)}
.article-body ul,.article-body ol{margin:0 0 18px 22px;color:var(--muted)}
.article-body li{margin-bottom:8px}
.article-body img{max-width:100%;height:auto;border-radius:var(--radius);margin:12px 0}
.article-body a{color:var(--blue);text-decoration:underline}
.article-body blockquote{border-left:3px solid var(--gold);padding-left:18px;margin:22px 0;color:var(--ink)}

@media(max-width:900px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  /* Sur la page blog, la liste reste une grille verticale : le carrousel
     générique du thème (.posts) convient à une sélection d'articles en page
     d'accueil, pas à une archive que l'on parcourt et pagine. */
  .blog .posts{display:grid;grid-template-columns:1fr;overflow:visible;
    margin:40px 0 0;padding:0;scroll-snap-type:none}
  .blog .posts>*{flex:none}
}
@media(max-width:640px){.posts{grid-template-columns:1fr}}

/* En dessous de 1180px la navigation passe au burger. La règle
   « body.on-ia .menu-ia{display:flex} » étant plus spécifique que
   « .menu{display:none} », le menu IMMO ACADEMY restait affiché et
   débordait de l'en-tête : on le masque explicitement ici. */
@media(max-width:1180px){
  body.on-ia .menu-ia{display:none}
}

/* =========================================================
   ÉCRANS LARGES MAIS PEU HAUTS (portables type MacBook Air)
   ---------------------------------------------------------
   Le hero réserve 170px en haut et le texte est aligné sur le bas
   de la photo : sur un écran de ~700px de haut, les boutons passaient
   sous la ligne de flottaison. On compacte la marge haute et la photo
   uniquement dans ce cas ; les grands écrans gardent la mise en page
   d'origine.
   ========================================================= */
@media (min-width:901px) and (max-height:950px){
  .hero{padding-top:126px}
  .hero-photo{width:116%;margin-left:-8%}
  .hero-grid{gap:36px}
  .stats{margin-top:8px}
  /* la photo étant plus courte, le badge (calé sur le bas) remontait trop */
  .tp-badge{bottom:76px}

  /* IMMO ACADEMY : titre sur 4 lignes, on réduit logo et corps du titre */
  .ia-hero{padding-top:124px}
  .ia-hero-grid>div:first-child{padding-bottom:48px}
  .ia-hero-media img{width:100%;margin-left:0}
  .ia-logo{height:44px;margin-bottom:16px}
  .ia-hero h1{font-size:clamp(2rem,3.6vw,3.1rem)}

  /* Pages ressources : titre lui aussi sur plusieurs lignes */
  .lp h1{font-size:clamp(1.8rem,2.9vw,2.5rem)}

  .hero-simple,.about-hero,.contact-hero,.avis-hero{padding-top:104px;padding-bottom:64px}
}

/* =========================================================
   VIDÉO D'AMBIANCE (section « Mon histoire »)
   Lecture automatique, sans son, en boucle, sans contrôles :
   elle habille la forme organique au lieu d'une vignette figée.
   Tant qu'aucune source n'est renseignée, le poster s'affiche.
   ========================================================= */
.histoire-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;border:0;background:var(--navy)}

/* Pastille « Voir la chaîne » posée sur la vidéo d'ambiance : placée en bas au
   centre, là où la forme organique est la plus large, pour ne masquer que le
   minimum de l'image. */
.yt-badge{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:2;
  display:inline-flex;align-items:center;gap:9px;padding:11px 19px;border-radius:999px;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--navy);font-weight:700;font-size:.92rem;white-space:nowrap;
  box-shadow:0 12px 30px rgba(11,31,68,.24);transition:transform .22s,background .22s}
.yt-badge svg{width:20px;height:20px;color:#FF0000;flex-shrink:0}
.yt-badge:hover{background:#fff;transform:translateX(-50%) translateY(-3px)}
@media(max-width:768px){.yt-badge{bottom:18px;padding:9px 15px;font-size:.85rem}}

/* La section « reco » ne contient plus que la formation offerte : le trait et
   la marge qui la séparaient du bloc « Tu te reconnais ? » n'ont plus d'objet. */
.reco .offerte{margin-top:0;padding-top:0;border-top:0}

/* Les réseaux sociaux passent après l'appel à l'action et servent de
   transition vers le pied de page : il leur faut leur propre respiration
   (ils héritaient de padding-top:0 quand ils suivaient la section « reco »). */
.reseaux{padding-top:96px}
@media(max-width:768px){.reseaux{padding-top:64px}}

/* Le halo doré de la section « formation offerte » débordait de 160px sous la
   section et se faisait trancher net par le rognage : on voyait un trait
   horizontal à la jonction avec l'appel à l'action, pourtant de même couleur.
   On le rentre entièrement dans la section, flou compris. */
.reco .deco-blob.b{bottom:150px}

/* =========================================================
   HERO IMMO ACADEMY — resserré
   ---------------------------------------------------------
   Le titre s'étalait sur 4 à 5 lignes en 57px (maquette : 16ch de large),
   ce qui repoussait les boutons hors de l'écran sur un portable. On réduit
   le corps du titre et on élargit sa colonne pour tenir en 3 lignes, quelle
   que soit la hauteur d'écran. Le bloc « écran peu haut » plus bas resserre
   encore sur les très petites hauteurs.
   ========================================================= */
.ia-hero{padding-top:120px}
.ia-hero h1{font-size:clamp(1.9rem,3.1vw,2.8rem);max-width:22ch}
.ia-logo{height:48px;margin-bottom:20px}
.ia-hero-grid>div:first-child{padding-bottom:56px}
.ia-hero .lead{font-size:1.05rem}

@media (min-width:901px) and (max-height:950px){
  .ia-hero{padding-top:96px}
  .ia-hero h1{font-size:clamp(1.8rem,2.8vw,2.5rem)}
  .ia-logo{height:42px;margin-bottom:16px}
  .ia-hero-grid>div:first-child{padding-bottom:40px}
}

/* =========================================================
   LECTEUR VIDÉO SUPERPOSÉ (témoignages)
   Les vignettes ouvrent la vidéo par-dessus la page au lieu
   d'envoyer sur une page Vimeo ou YouTube nue.
   ========================================================= */
.vplayer{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:28px;
  background:rgba(6,14,30,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vplayer[hidden]{display:none}
.vplayer-stage{width:min(1080px,100%);aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.vplayer-stage iframe{width:100%;height:100%;border:0;display:block}
.vplayer-close{position:absolute;top:20px;right:24px;width:46px;height:46px;padding:0;border:0;
  border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:1.7rem;line-height:1;
  cursor:pointer;transition:background .2s}
.vplayer-close:hover{background:rgba(255,255,255,.3)}
body.vplayer-ouvert{overflow:hidden}
@media(max-width:768px){.vplayer{padding:14px}.vplayer-close{top:10px;right:12px;width:40px;height:40px}}

/* =========================================================
   EXPERTS : la carte entière doit tenir dans l'écran
   Sur un portable (MacBook Air, ~740 px de hauteur utile) le
   bas des cartes — prénom et rôle — tombait sous le bord de la
   fenêtre : la section paraissait coupée. On resserre le bloc
   et on réduit un peu la carte.
   ========================================================= */
@media (min-width:769px){
  .experts{padding-top:80px}
  .exp-rail-wrap{margin-top:32px}
  .expert{flex:0 0 clamp(236px,23vw,292px)}
  .expert-body{padding:20px}
  .expert h3{font-size:1.35rem}
}

/* Écrans peu hauts : titre + carte complète + boutons ensemble. */
@media (min-width:901px) and (max-height:950px){
  .experts{padding-top:64px;padding-bottom:64px}
  .exp-rail-wrap{margin-top:24px}
  .expert{flex:0 0 clamp(220px,20vw,268px)}
}

/* Le rail défile tout seul avec la page : les cartes des bords
   se retrouvaient tranchées net. On les fait fondre dans le
   fond pour que le débord se lise comme voulu, pas comme un
   défaut. Le dégradé laisse passer les clics et reste sous les
   flèches de navigation (z-index 3). */
.exp-rail-wrap::before,.exp-rail-wrap::after{
  content:"";position:absolute;top:0;bottom:0;z-index:2;
  width:clamp(40px,7vw,110px);pointer-events:none}
.exp-rail-wrap::before{left:0;
  background:linear-gradient(90deg,var(--navy),rgba(11,31,68,0))}
.exp-rail-wrap::after{right:0;
  background:linear-gradient(270deg,var(--navy),rgba(11,31,68,0))}
@media(max-width:768px){.exp-rail-wrap::before,.exp-rail-wrap::after{width:28px}}

/* =========================================================
   PROGRAMME : durée estimée et sous-listes
   L'accordéon reprend la brochure PDF, qui indique un temps
   de travail par module et détaille le module 6 en trois
   modes d'exploitation.
   ========================================================= */
.prog-list summary .temps{flex:0 0 auto;font-weight:600;font-size:.76rem;color:var(--blue);
  background:var(--blue-soft);border-radius:999px;padding:5px 11px;margin-right:6px;white-space:nowrap}
.prog-list li>b{display:block;color:var(--navy);font-weight:700;margin-bottom:2px}
.prog-list li li::before{width:5px;height:5px;top:10px;background:var(--blue)}
@media(max-width:600px){.prog-list summary .temps{display:none}}

/* =========================================================
   PREUVE SOCIALE — page IMMO ACADEMY
   Le mur d'interviews passe de 6 à 18 vignettes, un bandeau
   de résultats chiffrés le prolonge, et les avis Trustpilot
   sont affichés en direct avant la FAQ.
   ========================================================= */

/* Le mur défile d'une grille entière : trois fois plus de
   vignettes qu'avant, donc à peu près trois fois plus de temps. */
.itw .wall-track{animation-duration:140s}

/* Provenance et date des indicateurs annoncés juste au-dessus. */
.ref-note{margin-top:14px;color:var(--muted);font-size:.82rem;line-height:1.5}

/* Résultats chiffrés : le chiffre porte la carte, la légende
   dit de qui il s'agit, la vignette renvoie à la vidéo. */
.resultats{background:#fff}
.res-grid{margin-top:40px}
.res-grid .wall-name{padding:16px}
.res-grid .wall-name b{display:block;color:var(--gold);font-size:1.3rem;line-height:1.15;
  letter-spacing:-.01em}
.res-grid .wall-name small{display:block;margin:5px 0 0;font-size:.85rem;
  color:rgba(255,255,255,.85);line-height:1.35}
.res-cta{margin-top:36px}
@media(max-width:768px){.res-grid .wall-name b{font-size:1.1rem}}

/* Avis Trustpilot : le widget se charge dans une iframe, on lui
   réserve sa place pour éviter que la page ne saute. */
.avis-tp{background:var(--blue-soft)}
.tp-zone{max-width:1120px;margin:40px auto 32px;min-height:528px}
/* Sur mobile les avis s'empilent : le dernier visible est forcément coupé
   par la hauteur fixe du widget. On le fait disparaître en fondu plutôt que
   de le trancher net. */
@media(max-width:768px){
  .tp-zone{min-height:0;margin:28px auto 24px;overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 80%,transparent 100%)}
}

/* Vignettes YouTube très chargées (titres incrustés) : la légende passe
   sous l'image, sur fond bleu nuit, au lieu de se superposer au visuel. */
.res-grid .wall-card{background:var(--navy)}
.res-grid .wall-name{position:static;background:none;padding:18px 24px 20px;text-align:center}
.res-grid .play{inset:0 0 auto 0;aspect-ratio:16/9}

/* Avis Trustpilot glissés dans les sections de preuve (mur d'interviews et
   résultats chiffrés) : le widget se charge en iframe, on lui réserve sa
   place pour que la page ne saute pas au chargement. */
.tp-inline{max-width:1180px;margin-inline:auto}
.tp-carrousel{margin-top:34px;min-height:150px}
.tp-note{margin-top:22px;min-height:44px}
@media(max-width:768px){.tp-carrousel{margin-top:26px}.tp-note{margin-top:18px}}

/* Un chapô sous un titre centré doit être centré comme bloc, pas seulement
   dans son texte : sans marge automatique, sa boîte de 56ch restait calée à
   gauche du conteneur et le paragraphe partait vers le bord. */
.tac .lead{margin-inline:auto}

/* Carte « 4,7/5 » du bandeau de référence : étoiles et lien aux couleurs
   officielles Trustpilot (vert #00B67A, gris #DCDCE6, vert foncé #005128
   pour le texte du lien, qui reste lisible là où le vert clair ne l'est pas). */
.tp-fact{display:flex;flex-direction:column;align-items:flex-start}
.tp-fact .tp-stars{display:block;width:124px;height:auto;margin:10px 0 9px}
.tp-fact .tp-voir{display:inline-flex;align-items:center;gap:6px;margin-top:auto;
  padding-top:12px;color:#005128;font-weight:700;font-size:.87rem;text-decoration:none}
.tp-fact .tp-voir svg{width:15px;height:15px;flex:0 0 auto;fill:#00B67A}
.tp-fact .tp-voir:hover{text-decoration:underline}

/* Formulaire LeadConnector intégré dans le bloc brochure : l'iframe arrive
   avec une hauteur provisoire que form_embed.js corrige au chargement ; on
   réserve la place pour que le bloc ne saute pas. */
.lc-form{position:relative}
.lc-form iframe{display:block;width:100%;border:0;border-radius:10px;background:#fff}
.lc-form small{display:block;margin-top:10px;color:rgba(255,255,255,.6);font-size:.78rem;line-height:1.45}

/* =========================================================
   PAGES RESSOURCES : un seul fond, sans couture
   L'en-tête, la page et le pied peignaient chacun leur fond,
   et la lueur bleue de la section était tranchée net par son
   overflow : on voyait trois bandes. Le dégradé est désormais
   porté par le body et traverse toute la page ; les décors
   internes, qui se coupaient aux bords, sont retirés.
   ========================================================= */
body.on-lp{
  background:
    radial-gradient(1000px 700px at 16% 18%, rgba(30,91,255,.42), rgba(30,91,255,0) 68%),
    radial-gradient(780px 580px at 88% 60%, rgba(246,190,70,.10), rgba(246,190,70,0) 70%),
    linear-gradient(180deg,#0a1c3e 0%,#0b1f44 44%,#08162f 100%);
  background-repeat:no-repeat;
}
body.on-lp .lp-header,
body.on-lp .lp,
body.on-lp .lp-footer{background:transparent}
body.on-lp .lp .deco{display:none}
body.on-lp .lp-footer{padding-top:56px}
/* La page tient souvent en moins d'un écran : sans cela le dégradé s'arrêtait
   avec le contenu et laissait une bande blanche sous le pied de page. */
body.on-lp{min-height:100vh}
body.on-lp .wp-site-blocks{min-height:100vh;display:flex;flex-direction:column}
/* Le contenu est court : on le centre verticalement dans l'espace restant
   plutôt que de le laisser collé en haut d'une grande zone vide. */
body.on-lp main{flex:1 0 auto;display:flex;align-items:center}
body.on-lp main>.entry-content{width:100%}

/* Réseaux sociaux du pied de page : vraies icônes de marque à la place des
   lettres de la maquette (« f », « ▶ », « IG »). */
.social a svg{width:19px;height:19px;display:block}
.social a{transition:background .2s,color .2s,border-color .2s}
.social a:hover{border-color:#fff}

/* =========================================================
   PAGES LÉGALES (mentions légales, confidentialité)
   Texte long : colonne étroite, interlignage généreux, et
   des intertitres qui permettent de s'y repérer.
   ========================================================= */
.legal-hero{padding-bottom:56px}
.legal-page{background:#fff;padding-top:0;padding-bottom:96px}
.legal-inner{max-width:820px;margin-inline:auto}
.legal-inner h2{color:var(--navy);font-size:1.2rem;line-height:1.35;margin:42px 0 14px}
.legal-inner>:first-child{margin-top:0}
.legal-inner p{color:var(--muted);line-height:1.8;margin-bottom:18px}
.legal-inner a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.legal-inner a:hover{color:var(--navy)}
@media(max-width:768px){.legal-page{padding-bottom:64px}.legal-inner h2{margin-top:32px}}

/* =========================================================
   ANNOTATIONS MANUSCRITES
   Petites notes à la main, avec une flèche, posées là où
   quelque chose n'est pas évident au premier coup d'œil
   (une liste qui se déplie, un rail qui défile, une vidéo
   qui s'ouvre sur place). Décoratives : elles ne portent
   aucune information qu'on ne trouve pas ailleurs, et sont
   masquées aux lecteurs d'écran.
   ========================================================= */
.note-main{font-family:"Caveat","Bradley Hand","Segoe Script",cursive;font-weight:700;
  font-size:clamp(1.2rem,1.9vw,1.6rem);line-height:1.15;color:var(--blue);
  display:inline-flex;align-items:center;gap:12px;margin:0;transform:rotate(-2deg)}
.note-main svg{width:clamp(56px,6.5vw,92px);height:auto;flex:0 0 auto;overflow:visible}
/* Variante sur fond sombre — .itw est clair sur ce thème, il garde le bleu. */
.av-sec .note-main,.join .note-main,.experts .note-main,.final .note-main{color:var(--gold)}
/* Une note posée à droite du titre de section */
.note-ligne{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.note-ligne .note-main{margin-bottom:6px}
@media(max-width:820px){
  .note-main{font-size:1.15rem;transform:rotate(-1.5deg)}
  .note-main svg{width:52px}
}
/* Flèche qui plonge vers ce dont la note parle (juste en dessous). */
.note-bas svg{transform:rotate(34deg)}
.note-bas{align-items:flex-start}
/* La note est posée juste au-dessus de ce qu'elle désigne. */
.note-zone{display:flex;justify-content:center;margin-top:34px}
.itw .note-main{margin-top:30px}

/* =========================================================
   BADGE TRUSTPILOT DU HERO : petite animation d'arrivée
   Les cinq étoiles se remplissent une fois, comme une note
   qu'on attribue, puis plus rien ne bouge. Le mouvement est
   coupé si le visiteur a demandé moins d'animations.
   ========================================================= */
.tp-badge{animation:tpEntree .7s .1s cubic-bezier(.22,.9,.3,1) both;
  transition:transform .25s ease,box-shadow .25s ease}
.tp-badge:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(11,31,68,.2)}
@keyframes tpEntree{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.tp-badge .stars{position:relative;display:inline-block;color:rgba(0,182,122,.22)}
.tp-badge .stars::after{content:"★★★★★";position:absolute;left:0;top:0;color:var(--tp);
  white-space:nowrap;overflow:hidden;width:0;
  animation:tpEtoiles 1.1s .55s cubic-bezier(.22,.8,.3,1) forwards}
@keyframes tpEtoiles{to{width:100%}}
@media (prefers-reduced-motion:reduce){
  .tp-badge,.tp-badge .stars::after{animation:none}
  .tp-badge .stars::after{width:100%}
  .tp-badge:hover{transform:none}
}

/* Le logo IMMO ACADEMY remplace la mention textuelle au-dessus du titre de la
   section « écosystème » : fond clair ici, donc pas d'inversion, contrairement
   au hero de la page IMMO ACADEMY. */
.eco-logo{height:46px;width:auto;display:block;margin-bottom:22px}
.wp-block-image.eco-logo img{height:100%;width:auto}
@media(max-width:768px){.eco-logo{height:38px;margin-bottom:18px}}

/* =========================================================
   PAGES FORMATIONS (création d'entreprise, Excel)
   Reprise des pages Elementor du site en ligne avec les
   composants du thème : hero + atouts, bloc Qualiopi,
   équipe, programmes PDF.
   ========================================================= */
.offre-hero{padding-bottom:72px}
.offre-hero h1{max-width:16ch}
.wp-block-image.offre-mockup img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 26px 54px rgba(11,31,68,.22))}
.offre-atouts{background:var(--blue-soft);padding-top:72px;padding-bottom:72px}
.offre-atouts .why-grid{margin-top:0}

.qualiopi{background:#fff}
.qualiopi-grid{display:grid;grid-template-columns:320px 1fr;gap:56px;align-items:center}
.wp-block-image.qualiopi-img img{width:100%;height:auto;display:block;border-radius:14px;
  border:1px solid var(--line)}
.qualiopi p{color:var(--muted);line-height:1.8;margin-bottom:14px}
.qualiopi strong{color:var(--navy)}
@media(max-width:900px){.qualiopi-grid{grid-template-columns:1fr;gap:32px}}

.offre-bloc{background:#fff;padding-top:64px;padding-bottom:64px}
.offre-bloc:nth-of-type(even){background:var(--blue-soft)}
.offre-texte{max-width:860px}
.offre-texte h2{margin-bottom:18px}
.offre-texte p{color:var(--muted);line-height:1.8;margin-bottom:16px}
.offre-liste{display:grid;gap:10px;margin-top:8px}
.offre-liste li{color:var(--muted);position:relative;padding-left:26px;line-height:1.65}
.offre-liste li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
  border-radius:50%;background:var(--gold)}
.offre-liste strong{color:var(--navy)}

.offre-equipe{background:var(--navy);color:#fff}
.offre-equipe h2{color:#fff}.offre-equipe .kicker{color:var(--gold)}
.offre-equipe .hl{color:var(--gold)}
.offre-experts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:44px 0 36px}
.offre-expert{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:18px;padding:26px}
.offre-expert b{display:block;font-size:1.3rem;margin-bottom:2px}
.offre-expert span{display:block;color:var(--gold);font-weight:600;font-size:.9rem;margin-bottom:12px}
.offre-expert p{color:rgba(255,255,255,.78);font-size:.95rem;line-height:1.7}
@media(max-width:900px){.offre-experts{grid-template-columns:1fr}}

.offre-pdfs{background:#fff}
.offre-pdfs .pdf-note{margin-top:22px;text-align:center}

/* Page « Calculateur de cash-flow » : l'outil est rendu par son propre plugin
   (police et styles maison) ; on lui réserve une zone claire et centrée. */
.calc-hero{padding-bottom:56px}
.calc-outil{background:#fff;padding-top:0;padding-bottom:88px}
.calc-zone{max-width:1060px}
@media(max-width:768px){.calc-outil{padding-bottom:56px}}

/* =========================================================
   TUNNEL « FORMATION OFFERTE » (vidéos 1 à 3)
   Fond sombre comme les pages ressources, lecteur au centre,
   texte en colonne étroite en dessous.
   ========================================================= */
.tunnel{padding-bottom:64px}
.tunnel h1{max-width:20ch;margin-inline:auto}
.tunnel-video{max-width:900px;margin:34px auto 0;border-radius:18px;overflow:hidden;
  background:#000;aspect-ratio:16/9;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.tunnel-video iframe{width:100%;height:100%;border:0;display:block}
.tunnel-cta{justify-content:center;margin-top:30px}
.tunnel-corps{padding-top:0;padding-bottom:88px}
.tunnel-texte{max-width:820px}
.tunnel-texte p{color:rgba(255,255,255,.78);line-height:1.8;margin-bottom:16px}
.tunnel-texte h2{color:#fff;margin:40px 0 18px}
.tunnel-texte .hl{color:var(--gold)}
.tunnel-texte .offre-liste li{color:rgba(255,255,255,.78)}
@media(max-width:768px){.tunnel-corps{padding-bottom:56px}.tunnel-video{margin-top:26px}}

/* =========================================================
   FENÊTRE DU FORMULAIRE D'INSCRIPTION
   Les boutons des pages ressources ouvrent le tunnel existant
   par-dessus la page : même formulaire, mêmes automatisations,
   et le visiteur ne quitte pas le site.
   ========================================================= */
.modale{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:24px;
  background:rgba(6,14,30,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modale[hidden]{display:none}
.modale-scene{width:min(980px,100%);height:min(88vh,760px);border-radius:18px;overflow:hidden;
  background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.modale-scene iframe{width:100%;height:100%;border:0;display:block}
.modale-fermer{position:absolute;top:18px;right:22px;width:46px;height:46px;border:0;
  border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:1.7rem;line-height:1;
  cursor:pointer;transition:background .2s}
.modale-fermer:hover{background:rgba(255,255,255,.3)}
body.modale-ouverte{overflow:hidden}
@media(max-width:768px){
  .modale{padding:10px}
  .modale-scene{height:92vh;border-radius:12px}
  .modale-fermer{top:8px;right:10px;width:38px;height:38px;font-size:1.4rem}
}
/* Quand la fenêtre ne contient que le formulaire, elle se resserre. */
.modale.modale-formulaire .modale-scene{width:min(560px,100%);height:min(620px,86vh)}

/* =========================================================
   HERO SUR ÉCRAN LARGE (accueil + IMMO ACADEMY)
   La compaction « écrans peu hauts » (max-height:950px) visait
   les portables, mais elle attrape aussi les grands écrans
   larges et peu hauts (1600×813, par exemple) : le hero s'y
   retrouvait collé au bandeau du haut, et la section suivante
   remontait dans la fenêtre. Au-delà de 1280px de large on
   redonne donc de l'air, quitte à ce que « La référence en
   immobilier » passe sous la ligne de flottaison — c'est voulu.
   Seuil à 1000px et non 1280 : entre 1100 et 1279 la photo du hero
   démarrait pile au bas du menu (écart mesuré : 0px).
   ========================================================= */
@media (min-width:1000px){
  /* Accueil : la photo démarrait 30px sous le menu, la tête touchait
     presque la barre. On la descend pour dégager le haut de page. */
  .hero{padding-top:206px}
  .ia-hero{padding-top:195px}
  .ia-hero-grid>div:first-child{padding-bottom:110px}
  .ia-logo{height:52px;margin-bottom:22px}
  .ia-hero h1{font-size:clamp(2.2rem,3.4vw,3.2rem)}
}

/* =========================================================
   CARTE DES PROJETS D'ÉLÈVES
   Le bloc était posé hors du conteneur : il s'étalait sur
   toute la largeur de la fenêtre (1600px pour 442px de haut,
   soit 3,6:1) et la carte s'en trouvait écrasée. On la ramène
   à la largeur d'une colonne de lecture et on lui donne de la
   hauteur, pour qu'on puisse y lire quelque chose.
   ========================================================= */
/* NB : la règle d'origine est `.itw .map iframe` (spécificité 0,3,1).
   Écrire `.map iframe` ici ne suffisait pas, malgré l'ordre du fichier. */
.itw .map{max-width:920px;margin-inline:auto}
.itw .map iframe{height:560px}
@media(max-width:768px){ .itw .map iframe{height:380px} }

/* =========================================================
   RAIL DES EXPERTS : MÊME CADRE QUE LE RESTE
   Le rail débordait volontairement jusqu'aux bords de la
   fenêtre (1600px sur un grand écran), alors que le mur de
   vidéos juste au-dessus s'arrête à la largeur de lecture.
   Les deux se suivent : ils doivent se cadrer pareil.
   ========================================================= */
@media (min-width:1240px){
  .experts .exp-rail-wrap{max-width:1180px;margin-inline:auto}
  .experts .exp-rail{padding-inline:0}
  .experts .exp-rail-wrap::before,
  .experts .exp-rail-wrap::after{width:clamp(24px,3vw,48px)}
}

/* =========================================================
   FAQ SUR DEUX COLONNES
   21 questions à la file, ça faisait un long défilement pour
   rien. En grille, chaque question garde sa hauteur propre :
   en ouvrir une ne décale pas la colonne d'à côté.
   Les traits de séparation viennent du bord haut ; il faut
   donc rétablir le bord bas sur la dernière ligne, qui n'est
   plus une seule question mais deux.
   ========================================================= */
@media (min-width:900px){
  .faq-list{
    max-width:1180px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:52px;
    align-items:start;
  }
  .faq-list details:last-child{border-bottom:none}
  .faq-list details:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
}

/* =========================================================
   ACCUEIL SUR PORTABLE (écran large mais peu haut)
   Le texte est calé sur le bas de la photo : avec une photo de
   ~570px, un écran de ~760px (MacBook) montrait un grand vide
   sous le menu, et le bouton était coupé par le bas de la fenêtre avec
   la mention « Gratuit, sans engagement » passée dessous. On borne la hauteur de la
   photo à la fenêtre et on réduit la marge haute : le titre remonte
   à ~70px du menu et tout le bloc reste au-dessus de la ligne de
   flottaison. Les écrans plus hauts gardent la mise en page ci-dessus.
   ========================================================= */
@media (min-width:1000px) and (max-height:950px){
  .home .hero{padding-top:150px}
  .home .wp-block-image.hero-photo img{max-height:calc(100vh - 240px);object-fit:contain;object-position:bottom center}
}

/* =========================================================
   ACCUEIL — SECTION IMMO ACADEMY RESSERRÉE (ordinateur)
   Le téléphone (≈870px de haut) était posé seul sous le texte : la
   section faisait près de deux écrans. On le passe à droite, à côté du
   titre, en plus petit, et on remonte la liste sous l’introduction ;
   la grille intérieure s’efface (display:contents) pour que liste et
   téléphone rejoignent la grille du conteneur. Mobile inchangé.
   ========================================================= */
@media (min-width:901px){
  .eco .container{display:grid;grid-template-columns:1fr minmax(0,400px);column-gap:64px;align-items:start}
  .eco .container>*{grid-column:1}
  .eco-grid{display:contents}
  .eco-list{grid-column:1;margin-top:8px}
  .eco-media{grid-column:2;grid-row:1 / span 4;align-self:center;max-width:400px;padding:16px 48px;margin:0}
  .eco h2{max-width:22ch}
  .eco-card{padding:18px 0;gap:16px;grid-template-columns:56px 1fr}
  .eco-card .ico{width:48px;height:48px}
  .eco-card p{margin-bottom:4px}
  .eco .cta{margin-top:24px}
}

/* =========================================================
   IMMO ACADEMY SUR PORTABLE (écran large mais peu haut)
   Même problème que le hero de l’accueil : sur ~760px de haut, le
   logo démarrait 100px sous le menu et la ligne Trustpilot sous les
   boutons tombait au bas de la fenêtre. On réduit la marge haute, le
   logo et le titre, et on borne la photo à la hauteur de la fenêtre
   (object-fit : la colonne garde sa largeur, le texte ne se resserre
   pas). Les écrans plus hauts gardent la mise en page ci-dessus.
   ========================================================= */
@media (min-width:1000px) and (max-height:950px){
  .ia-hero{padding-top:150px}
  .ia-logo{height:40px;margin-bottom:14px}
  .ia-hero h1{font-size:clamp(2rem,2.9vw,2.7rem);margin-bottom:12px}
  .ia-hero .actions{margin:22px 0 14px}
  .ia-hero-grid>div:first-child{padding-bottom:64px}
  .ia-hero-grid>*{min-width:0}
  .ia-hero-media img{max-height:calc(100vh - 200px);object-fit:contain;object-position:bottom center}
}

/* =========================================================
   RAIL DES EXPERTS EN BOUCLE (ordinateur)
   Le script regroupe les cartes dans .exp-track et la fait
   glisser en continu ; le rail ne défile plus lui-même (plus
   d'aimantation qui provoquait les à-coups). Mobile inchangé.
   ========================================================= */
.exp-rail.exp-loop{overflow:hidden;scroll-snap-type:none}
.exp-track{display:flex;gap:20px;will-change:transform;flex:0 0 auto}
.exp-loop .expert{scroll-snap-align:none}
/* Fondu des bords : les voiles peints en bleu marine (::before/::after)
   se voyaient comme des rectangles sombres là où le fond de la section
   s'éclaircit. Un masque rend les cartes transparentes à la place. */
.exp-rail-wrap::before,.exp-rail-wrap::after{display:none}
.exp-rail{--fondu:clamp(28px,6vw,90px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fondu),#000 calc(100% - var(--fondu)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--fondu),#000 calc(100% - var(--fondu)),transparent)}

/* Page « À propos » : la vidéo d'ambiance de l'accueil remplace la photo
   de « Mon histoire ». Même forme organique ; sur l'accueil elle est
   placée à droite (order:2), ici elle reste à gauche du texte. */
.about-media .histoire-video{order:0}

/* IMMO ACADEMY sur portable, suite : la section précédente laissait voir
   ~80px de la section suivante (« on voit trop la ligne de flottaison »).
   Le hero occupe désormais toute la hauteur de la fenêtre ; la photo
   (carrée, détourée) grandit jusqu’à +15 % sans être rognée, et le texte
   se centre verticalement à côté d’elle. */
@media (min-width:1000px) and (max-height:950px){
  .ia-hero{min-height:calc(100svh - 43px);display:flex;flex-direction:column;justify-content:flex-end}
  .ia-hero-grid>div:first-child{align-self:center;padding:24px 0}
  .ia-hero-media{container-type:inline-size}
  .ia-hero-media img{width:clamp(112cqw,calc(100svh - 193px),129cqw);height:auto;max-height:none;object-fit:initial;
    margin:0 0 -1px 50%;transform:translateX(-50%)}
}

/* Fenêtre du formulaire LeadConnector : les formulaires font 412px de haut
   (code d'intégration fourni le 28/09/2026). La fenêtre de 620px laissait un
   grand blanc sous le bouton ; on la cale sur le formulaire, avec de la marge
   pour le message de confirmation. */
.modale.modale-formulaire .modale-scene{height:min(480px,86vh)}