/* VERHELIA, styles de la page contact (version du 6 novembre 2026). */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400.woff2) format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-500.woff2) format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600.woff2) format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-700.woff2) format("woff2")}
@font-face{font-family:"Virgil";src:url(../fonts/virgil.woff2) format("woff2");font-display:swap}
body{margin:0;background:#FFFFFF}
a{color:#0B7A6E}a:hover{color:#0F3A5E}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px;box-sizing:border-box}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,260px);gap:56px;align-items:center}
.pillars{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:24px;align-items:start}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:center}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.constat{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr) minmax(0,350px);gap:56px;align-items:start}
.pf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.pf-visual{min-height:380px}
.hand{font-family:"Virgil","Comic Sans MS",cursive;font-weight:400}
.rot{position:relative;height:40px}
.rot-item{position:absolute;left:0;top:0;white-space:nowrap}
.ink{position:absolute;top:24px;right:24px;width:220px;height:220px;pointer-events:none}
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:linear-gradient(90deg,#0B7A6E,#7FD4C9);transform:scaleX(0);transform-origin:0 50%}
.marquee{overflow:hidden}
.track{display:flex;width:max-content}
.track span{white-space:nowrap}
.nl{position:relative;color:#1E2A33;text-decoration:none;padding:8px 0}
.nl::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:#0B7A6E;transform:scaleX(0);transform-origin:0 50%;transition:transform .25s ease}
.nl:hover{color:#0F3A5E}.nl:hover::after{transform:scaleX(1)}
.skip{position:absolute;left:16px;top:-80px;z-index:60;background:#0F3A5E;color:#FFFFFF;padding:10px 16px;border-radius:8px;font-weight:600;font-size:15px;text-decoration:none}
.skip:focus{top:12px}
.mnav{display:none}
.mnav summary,.ft details summary{list-style:none;cursor:pointer}
.mnav summary::-webkit-details-marker,.ft details summary::-webkit-details-marker{display:none}
.mlink{display:block;padding:14px 0;border-bottom:1px solid #EEF1F3;color:#1E2A33;text-decoration:none;font-size:16px;font-weight:500}
.ft details[open] .chev{transform:rotate(180deg)}
.nl.on{color:#0F3A5E}.nl.on::after{transform:scaleX(1)}
.cx{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr) minmax(0,330px);gap:56px;align-items:start}
.gv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:64px;align-items:start}
.au{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:64px;align-items:start}
.row{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:40px;padding:30px 36px}
.row + .row{border-top:1px solid #E3E9EF}
.alu{border:2px solid transparent;background:linear-gradient(#FFFFFF,#FFFFFF) padding-box,linear-gradient(135deg,#B9C3CC 0%,#7F8C98 20%,#AEB9C3 34%,#D2D9DF 46%,#6C7A87 66%,#A3AFBA 82%,#BEC7D0 100%) border-box;border-radius:16px}
.pline{position:absolute;left:57px;top:74px;bottom:-30px;width:1.5px;background:linear-gradient(#0B7A6E,rgba(11,122,110,.3))}
.kick{margin:0 0 16px;display:flex;align-items:center;gap:14px;font-size:12px;font-weight:600;letter-spacing:.2em;color:#0B7A6E}
.kick::before{content:"";display:inline-block;width:36px;height:1px;background:currentColor}
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);gap:64px;align-items:start}
.fld{display:flex;flex-direction:column;gap:7px}
.fld label{font-size:14px;font-weight:600;color:#1E2A33}
.fld input,.fld select,.fld textarea{font:inherit;font-size:15px;color:#1E2A33;padding:12px 14px;border:1px solid #CBD5DF;border-radius:10px;background:#FFFFFF;box-sizing:border-box;width:100%;transition:border-color .2s ease,box-shadow .2s ease}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:#0B7A6E;box-shadow:0 0 0 3px rgba(11,122,110,.15)}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nstep{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid rgba(255,255,255,.16)}
.cta{background:#0F3A5E;color:#FFFFFF;text-decoration:none;transition:background .2s ease}
.cta:hover{background:#0B7A6E;color:#FFFFFF}
@keyframes hdrsh{from{box-shadow:0 0 0 rgba(15,58,94,0)}to{box-shadow:0 12px 30px -18px rgba(15,58,94,.45)}}
.ft a{color:#FFFFFF;text-decoration:none}.ft a:hover{color:#C9D6E2;text-decoration:underline}
.ft .res a{color:#C9D6E2}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fadeonly{from{opacity:0}to{opacity:1}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes inkdraw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes wipeL{from{clip-path:inset(-24px 100% -24px -24px)}to{clip-path:inset(-24px -24px -24px -24px)}}
@keyframes wipeR{from{clip-path:inset(-24px -24px -24px 100%)}to{clip-path:inset(-24px -24px -24px -24px)}}
.motion .track{animation:slide 48s linear infinite}
.motion .marquee:hover .track{animation-play-state:paused}
.motion .draw{animation:wipeL 1s ease-out both}
.motion .draw-r{animation:wipeR 1.1s ease-out both}
.motion .later{opacity:0;animation:fadeonly .6s ease forwards}
@supports (animation-timeline: view()){
.motion .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 5% cover 28%}
.motion .note-in{animation:fadeonly linear both;animation-timeline:view();animation-range:entry 70% cover 45%}
.motion .draw-view{animation:wipeL linear both;animation-timeline:view();animation-range:entry 40% cover 50%}
.motion .draw-view-r{animation:wipeR linear both;animation-timeline:view();animation-range:entry 40% cover 50%}
.motion .ink path{animation:inkdraw linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
.motion .progress{animation:grow linear both;animation-timeline:scroll(root)}
.motion .hdr{animation:hdrsh linear both;animation-timeline:scroll(root);animation-range:0px 140px}
}
@media (max-width:900px){
.cgrid,.frow{grid-template-columns:minmax(0,1fr);gap:20px}
.formcard{margin-top:0 !important}
.cx,.gv,.au{grid-template-columns:minmax(0,1fr);gap:32px}
.row{grid-template-columns:minmax(0,1fr);gap:10px;padding:24px 22px}
.pline{display:none}
.dnav{display:none !important}
.mnav{display:block}
.hero-grid,.pillars,.g2,.g3,.constat,.pf{grid-template-columns:minmax(0,1fr);gap:32px}
.pf{gap:0}
.pf-visual{min-height:220px;padding:24px 18px !important}
.h1{font-size:36px !important}
.h2{font-size:30px !important}
.anno,.ink{display:none !important}
.nowrap{white-space:normal !important}
.rot{height:72px}
.rot-item{white-space:normal}
.wrap{padding:0 20px}
}
@media (prefers-reduced-motion: reduce){
.motion *{animation:none !important}
.motion .later{opacity:1 !important}
}