/* EDNC — heros immersifs (accueil + 3 univers sur le même squelette .hp-u depuis le 27/10/2026) et utilitaires de motion.
   Se charge APRÈS la feuille de la page. Dépend de assets/js/motion.js (GSAP). */

/* ---------- utilitaires partagés ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hd .hd-in{transition:min-height .3s}
.hd.hd-small .hd-in{min-height:66px}
.hd .brand img{transition:height .3s}
.hd.hd-small .brand img{height:36px}
.hd.hd-small .brand-u img{height:44px}
/* Une seule police sur tout le site : Poppins (22/10/2026 — Sansita One et JetBrains Mono abandonnées). .serif et .mono restent des classes d'accent, en Poppins */
.serif{font-family:inherit;font-style:normal;font-weight:800;letter-spacing:-.03em}
.mono{font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.pic{width:28px;height:28px;color:currentColor;flex:none}
.pic-l{width:36px;height:36px}
.pic-xl{width:48px;height:48px}
.sticker{display:inline-flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:10px 18px 10px 12px;font-weight:600;font-size:14px;color:#2E1D48;box-shadow:0 14px 34px rgba(46,29,72,.16);white-space:nowrap}
.sticker .pic{width:26px;height:26px;color:#5B4293}
.split-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.split-line > *{display:inline-block;will-change:transform}
[data-split] .char,[data-split] .word{display:inline-block;will-change:transform}
.hx-cursor{position:fixed;left:0;top:0;width:14px;height:14px;border-radius:50%;background:#ED7B1F;pointer-events:none;z-index:9999;translate:-50% -50%;mix-blend-mode:multiply;transition:width .25s,height .25s,background .25s,opacity .3s;opacity:0}
.hx-cursor.on{opacity:1}
.hx-cursor.big{width:64px;height:64px;background:rgba(237,123,31,.35)}
.hx-cursor.dark{mix-blend-mode:screen}
@media (hover:none),(pointer:coarse){.hx-cursor{display:none}}
.mq-x{overflow:hidden;white-space:nowrap;position:relative}
.mq-x .mq-in{display:inline-flex;gap:0;will-change:transform;animation:mqx 40s linear infinite}
.mq-x:hover .mq-in{animation-play-state:paused}
@keyframes mqx{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.mq-x span{display:inline-flex;align-items:center;gap:22px;padding:0 22px;font-weight:700;letter-spacing:-.01em}
.mq-x span i{width:10px;height:10px;border-radius:50%;background:#ED7B1F;display:inline-block}
.hx{position:relative;overflow:hidden}
.hx .crumb{display:flex;align-items:center;gap:8px;font-size:13px}
.hx .crumb a{text-decoration:none;font-weight:500}
.hx .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.mag{display:inline-flex;will-change:transform}
.hx-scroll{position:absolute;left:50%;bottom:22px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8A849E}
.hx-scroll i{width:1px;height:34px;background:currentColor;display:block;animation:scrl 1.8s ease-in-out infinite;transform-origin:top}
@keyframes scrl{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}
@media (prefers-reduced-motion:reduce){.mq-x .mq-in,.hx-scroll i,.blob,.fl,.fl2{animation:none!important}}

/* ---------- HEROS v3 : photo pleine largeur, lumineux, illustré (inspiration Pixel / Kinder Village) ---------- */
section.hp{position:relative;overflow:hidden;isolation:isolate;color:#2E1D48}
.hp-bg{position:absolute;inset:0;z-index:-2;background:#F6F5F9}
.hp-bg img{width:100%;height:100%;object-fit:cover;scale:1.06;will-change:transform}
.hp-veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.8) 26%,rgba(255,255,255,.45) 50%,rgba(255,255,255,.08) 70%,rgba(255,255,255,.1) 100%)}
.hp .crumb{color:#5E567A}.hp .crumb a{color:#2E1D48}
.hp-title{position:relative;font-size:clamp(42px,6vw,84px);line-height:1.02;font-weight:800;letter-spacing:-.03em;color:#2E1D48}
.hp-title .c1{color:#2E1D48}.hp-title .c2{color:#179B8F}.hp-title .c3{color:#ED7B1F}.hp-title .c4{color:#5B4293}
.hp-sub{font-size:18px;color:#453C5E;line-height:1.6;max-width:640px;margin-top:22px}
.hp .cta{margin-top:30px}
.hp-trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;margin-bottom:34px;font-size:13.5px;color:#5E567A;font-weight:500}
.hp-trust span{display:inline-flex;align-items:center;gap:7px}
.hp-trust .pic{width:20px;height:20px;color:#5B4293}
.hp-trust span{background:rgba(255,255,255,.78);backdrop-filter:blur(8px);padding:6px 13px 6px 9px;border-radius:999px;color:#2E1D48}
.hp-cards{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:auto;padding-bottom:36px}
.hp-card{position:relative;display:flex;gap:16px;align-items:flex-start;text-align:left;background:rgba(255,255,255,.8);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.95);border-radius:24px;padding:22px 20px;text-decoration:none;color:#2E1D48;box-shadow:0 18px 44px rgba(46,29,72,.14);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;will-change:transform}
.hp-card:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(46,29,72,.2);color:#2E1D48}
.hp-ico{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.hp-card:hover .hp-ico{transform:scale(1.08) rotate(-6deg)}
.hp-ico .pic{width:30px;height:30px}
.ico-lilac{background:#EBE8F2;color:#5B4293}.ico-peach{background:#FDEFE4;color:#D96D12}.ico-mint{background:#E3F3F2;color:#179B8F}.ico-rose{background:#fde8f0;color:#d9467a}.ico-sky{background:#e6f0fd;color:#2b6fd6}
.hp-card b{display:block;font-size:16.5px;line-height:1.2}
.hp-card p{font-size:13.5px;color:#5E567A;margin-top:6px;line-height:1.5}
.hp-card .hp-arr{position:absolute;right:16px;top:16px;width:30px;height:30px;border-radius:50%;background:#ED7B1F;color:#2E1D48;display:flex;align-items:center;justify-content:center;opacity:0;transform:translate(-6px,6px);transition:opacity .3s,transform .3s}
.hp-card:hover .hp-arr{opacity:1;transform:none}
.hp-card .hp-arr .ic{width:14px;height:14px}
/* mot animé du titre (remplace le trait dessiné sous le mot, 22/10/2026) */
.hp-title .rw{display:inline-block;white-space:nowrap;vertical-align:bottom;overflow:hidden;padding:.04em .14em .14em .02em;margin:-.04em -.14em -.14em -.02em;box-sizing:content-box}
.hp-title .rw-i{display:inline-block;will-change:transform}
/* formes géométriques animées : halos, grilles de points, anneaux avec points en orbite, arc pointillé, croix, traits (remplacent les dessins faits main) */
.pro-sh{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.pro-orb{position:absolute;border-radius:50%;filter:blur(50px);animation:proDrift 18s ease-in-out infinite alternate}
.pro-orb.o1{width:440px;height:440px;background:radial-gradient(circle,rgba(91,66,147,.30),transparent 66%)}
.pro-orb.o2{width:360px;height:360px;background:radial-gradient(circle,rgba(237,123,31,.30),transparent 66%);animation-duration:21s;animation-delay:-7s}
.pro-orb.o3{width:300px;height:300px;background:radial-gradient(circle,rgba(23,155,143,.26),transparent 66%);animation-duration:24s;animation-delay:-12s}
@keyframes proDrift{0%{translate:0 0;scale:1}50%{translate:46px -34px;scale:1.12}100%{translate:-34px 24px;scale:.94}}
.pro-grid{position:absolute;background-image:radial-gradient(rgba(91,66,147,.42) 1.5px,transparent 1.8px);background-size:18px 18px;-webkit-mask-image:radial-gradient(closest-side,#000 35%,transparent);mask-image:radial-gradient(closest-side,#000 35%,transparent);animation:proGrid 5s linear infinite}
.pro-grid.g1{width:240px;height:170px}
.pro-grid.g2{width:160px;height:160px;background-image:radial-gradient(rgba(237,123,31,.55) 1.5px,transparent 1.8px);animation-direction:reverse}
@keyframes proGrid{to{background-position:18px 18px}}
.pro-plus{position:absolute;width:18px;height:18px;color:#5B4293;animation:proTw 5.5s ease-in-out infinite}
.pro-plus svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.pro-plus.p2{color:#ED7B1F;width:14px;height:14px;animation-delay:-2s}
.pro-plus.p3{color:#179B8F;animation-delay:-3.6s}
@keyframes proTw{0%,100%{opacity:.25;scale:.75;rotate:0deg}50%{opacity:.9;scale:1;rotate:90deg}}
.pro-line{position:absolute;height:1.5px;width:150px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(91,66,147,.5),transparent);animation:proSlide 7s ease-in-out infinite}
.pro-line.l2{width:110px;background:linear-gradient(90deg,transparent,rgba(237,123,31,.6),transparent);animation-delay:-3.5s}
@keyframes proSlide{0%,100%{translate:-36px 0;opacity:.15}50%{translate:36px 0;opacity:1}}
/* dessins d'objets (doodles fournis par Mirantsoa le 22/10/2026, sources dans _revue/doodles) : PNG/WebP transparents, flottement + parallaxe, léger balancement */
.pro-dd{position:absolute;display:block;width:150px;filter:drop-shadow(0 14px 22px rgba(46,29,72,.12));animation:proSway 9s ease-in-out infinite}
.pro-dd img{width:100%;height:auto;display:block}
.pro-dd.d2{width:128px;animation:proSway2 11s ease-in-out infinite}
.pro-dd.d3{width:112px;animation:proSway3 13s ease-in-out infinite}
@keyframes proSway{0%,100%{rotate:-6deg}50%{rotate:-1deg}}
@keyframes proSway2{0%,100%{rotate:5deg}50%{rotate:0deg}}
@keyframes proSway3{0%,100%{rotate:-3deg}50%{rotate:3deg}}
.pro-ia{position:absolute;inset:0;z-index:1;pointer-events:none}
.pro-ia .pro-dd{filter:drop-shadow(0 0 16px rgba(127,224,210,.35)) drop-shadow(0 14px 22px rgba(0,0,0,.35))}
@media (prefers-reduced-motion:reduce){.pro-sh *{animation:none!important}}
@media (max-width:640px){.pro-dd{width:92px}.pro-home .d1{width:92px}.pro-home .d3{width:80px}}

/* ACCUEIL (corrigé le 22/10/2026) : texte calé à gauche sur fond lavande, photo à droite en fondu, formes géométriques, sans les 4 cartes */
.hp-home{min-height:min(82vh,720px);display:flex;flex-direction:column;background:linear-gradient(180deg,#F9F8FB 0%,#EFEDF4 100%)}
.hp-home .hp-bg{left:44%;background:transparent;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
.hp-home .hp-bg img{object-position:50% 10%}
.hp-home .hp-veil{background:linear-gradient(0deg,rgba(243,238,251,.45) 0,rgba(243,238,251,0) 22%)}
.hp-home .hp-in{position:relative;z-index:1;flex:1;display:flex;align-items:center;padding-top:44px;padding-bottom:60px}
.hp-home .hp-txt{width:min(700px,52vw)}
.hp-home .tag{background:rgba(255,255,255,.8);backdrop-filter:blur(8px)}
.hp-home .hp-title{margin-top:22px;font-size:clamp(34px,calc(4.45vw - 3px),54px);line-height:1.06}
.hp-home .hp-sub{max-width:min(560px,44vw);font-size:17.5px;margin-top:20px}
.hp-home .cta{margin-top:28px}
.hp-home .hp-trust{margin-bottom:0;gap:8px 10px;font-size:13px}
.hp-home .hp-trust span{padding:5px 12px 5px 8px}
.hp-home .hp-trust .pic{width:18px;height:18px}
.hp-qual{display:flex;align-items:center;gap:16px;margin-top:26px;max-width:min(520px,44vw);background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border:1px solid #fff;border-radius:20px;padding:10px 18px 10px 10px;box-shadow:0 14px 36px rgba(46,29,72,.1)}
.hp-qual a{flex:none;display:block}
.hp-qual img{width:118px;height:auto;display:block;border-radius:12px}
.hp-qual p{font-size:12.5px;line-height:1.45;color:#5E567A}
.hp-qual-n{display:block;font-weight:600;color:#2E1D48;margin-top:2px}
.pro-home .o1{left:-170px;top:-150px}
.pro-home .o2{left:36%;bottom:-200px}
.pro-home .o3{left:24%;top:-170px}
.pro-home .g1{left:-30px;bottom:24px}
.pro-home .g2{right:5%;top:34px;opacity:.9}
.pro-home .p1{left:43%;top:14%}
.pro-home .p2{left:3%;top:20%}
.pro-home .p3{left:51%;bottom:16%;color:#fff}
.pro-home .l1{right:6%;top:12%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent)}
.pro-home .d1{left:59%;top:3%}
.pro-home .d2{left:49%;bottom:7%;width:110px}
.pro-home .d3{right:4%;bottom:9%;width:136px}
.pro-home .l2{left:30%;top:9%}
@media (max-width:1100px){.hp-home .hp-bg img{object-position:50% 10%}}
@media (max-width:960px){
  .hp-home{min-height:0}
  .hp-home .hp-txt{width:100%}
  .hp-home .hp-title{font-size:clamp(34px,5.4vw,50px)}
  .hp-home .hp-in{order:1;padding-top:30px;padding-bottom:6px}
  .hp-home .hp-bg{position:relative;inset:auto;order:2;z-index:0;margin:24px 40px 40px;aspect-ratio:4/3;border-radius:26px;overflow:hidden;-webkit-mask-image:none;mask-image:none;box-shadow:0 26px 60px rgba(46,29,72,.18)}
  .hp-home .hp-veil{display:none}
  .hp-home .hp-sub,.hp-qual{max-width:600px}
  .pro-home .g2,.pro-home .p1,.pro-home .p3,.pro-home .d2{display:none}
  .pro-home .d1{left:auto;right:5%;top:auto;bottom:8%;width:104px}.pro-home .d3{right:auto;left:4%;bottom:26%;width:92px}
}
@media (max-width:640px){
  .hp-home .hp-bg{margin:22px 20px 32px;aspect-ratio:4/3.4}
  .hp-home .hp-title{font-size:clamp(32px,9.4vw,42px)}
  .hp-home .hp-title .rw{font-size:min(1em,calc((100vw - 52px) / 10.9))}
  .hp-home .hp-sub{font-size:16px}
  .hp-qual{gap:12px;padding:8px 12px 8px 8px}
  .hp-qual img{width:92px}
  .hp-qual p{font-size:11.5px}
}

/* positions des dessins et formes sur Petite Enfance / Management / IA (avant les media queries de ces pages) */
.hp-u .hp-in{z-index:1}
.pro-pe .o1{left:-170px;top:-150px}
.pro-pe .o2{left:34%;top:46%}
.pro-pe .o3{left:16%;bottom:-150px}
.pro-pe .g1{left:-24px;top:42%}
.pro-pe .g2{left:49%;top:60px}
.pro-pe .p1{left:58%;top:20%}
.pro-pe .p2{left:3%;top:16%}
.pro-pe .p3{left:40%;top:4%}
.pro-pe .l1{left:2%;top:64%}
.pro-pe .l2{left:40%;top:52%}
.pro-pe .d1{left:auto;right:1%;top:4%;width:136px}
.pro-pe .d2{right:1%;top:54%;width:116px}
.pro-pe .d3{left:52%;top:63%;width:92px}

/* UNIVERS (.hp-u, 27/10/2026 ; ex-.hp-pe) : photo pleine largeur, titre à gauche, encart devis (formulaire 2 étapes) ; cadrage photo par page (.hp-u / .hp-mg / .hp-ia) */
.hp-u{min-height:min(88vh,840px);display:flex;flex-direction:column}
.hp-u .hp-veil{background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.78) 30%,rgba(255,255,255,.18) 56%,rgba(255,255,255,0) 76%),linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 30%)}
.hp-u .hp-in{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start;padding-top:36px}
.hp-u .tag{margin-top:18px}
.hp-u .hp-title{margin-top:18px;max-width:720px;font-size:clamp(40px,5.6vw,74px)}
.hp-box{background:rgba(255,255,255,.86);backdrop-filter:blur(18px);border:1px solid #fff;border-radius:26px;padding:24px;box-shadow:0 30px 70px rgba(46,29,72,.2);margin-top:30px}
.hp-box h2{font-size:18px;color:#2E1D48;line-height:1.25}
.hp-box p{font-size:13.5px;color:#5E567A;margin-top:6px}
.hp-box .fld{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.hp-box label{font-size:12.5px;font-weight:600;color:#2E1D48}
.hp-box input,.hp-box select{width:100%;font-family:inherit;font-size:14.5px;color:#2E1D48;border:0;border-radius:14px;padding:11px 14px;background:#EFEDF4;min-height:46px;outline:none}
.hp-box input:focus,.hp-box select:focus{box-shadow:0 0 0 4px rgba(237,123,31,.45)}
.hp-box .btn{width:100%;margin-top:16px;min-height:48px;font-size:14.5px}
.hp-box small{display:block;text-align:center;font-size:12.5px;color:#5E567A;margin-top:10px}
.hp-box small a{color:#2E1D48;font-weight:600;text-decoration:none}
.hp-u .hp-cards{grid-column:1/-1}
.hp-u .hp-trust{margin-bottom:0}
.hp-u .hx-wave{position:relative;z-index:1;color:#2E1D48;margin-bottom:-1px}
.hp-u .mq-x{position:relative;z-index:1;background:#2E1D48;color:#fff;padding:18px 0;font-size:18px}
@media (max-width:1320px){.pro-pe .d1{display:none}}
@media (max-width:1100px){.hp-u .hp-in{grid-template-columns:minmax(0,1fr) 300px}.pro-pe .d3{display:none}}
@media (max-width:960px){.pro-pe .d1,.pro-pe .d3{display:none}.pro-pe .d2{right:3%;top:1%;width:82px}.hp-u{min-height:0}.hp-u .hp-in{grid-template-columns:minmax(0,1fr)}.hp-u .hp-veil{background:linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.72) 55%,rgba(255,255,255,.45) 100%)}.hp-box{margin-top:10px}.pro-pe .g2{display:none}}
@media (max-width:760px){.hp-u .hp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.pro-pe .pro-plus,.pro-pe .pro-line{display:none}}
@media (max-width:520px){.hp-u .hp-cards{grid-template-columns:minmax(0,1fr)}}

/* MANAGEMENT et IA : même squelette que Petite Enfance (.hp-u) ; le cadrage des trois photos (.hp-pe / .hp-mg / .hp-ia) est dans univers.css */

/* ≤ 960 px (22/10/2026, retour de Mirantsoa « on ne voit pas les personnages ») : la photo des heros Petite Enfance et Management
   sort du fond et devient un cadre 4:5 placé après le texte (comme l'accueil) ; .hp-in passe en display:contents pour ordonner
   texte → photo → encart / cartes ; le voile disparaît. */
@media (max-width:960px){
  .hp-u{background:linear-gradient(180deg,#F9F8FB 0%,#EFEDF4 100%)}
  .hp-u .hp-veil{display:none}
  .hp-u .hp-in{display:contents}
  .hp-u .hp-bg{position:relative;inset:auto;z-index:0;order:2;margin:4px 40px 28px;aspect-ratio:4/5;max-height:520px;border-radius:26px;overflow:hidden;background:#EBE8F2;box-shadow:0 26px 60px rgba(46,29,72,.18)}
  .hp-u .hp-bg img{scale:1;object-position:50% 30%}
  .hp-u .hp-in>div:first-child{order:1;padding-top:36px}
  .hp-u .hp-box{order:3}
  .hp-u .hp-cards{order:4}
  .hp-u .hx-wave{order:5}.hp-u .mq-x{order:6}
  .hp-u .hp-in>div:first-child,.hp-u .hp-box,.hp-u .hp-cards{margin-left:40px;margin-right:40px}
}
@media (max-width:640px){
  .hp-u .hp-bg{margin:2px 20px 24px;aspect-ratio:4/4.6}
  .hp-u .hp-in>div:first-child,.hp-u .hp-box,.hp-u .hp-cards{margin-left:20px;margin-right:20px}
}