/* À propos : cartes de valeurs + révélation */
#apropos{scroll-margin-top:70px}#processus{scroll-margin-top:70px}
html{background:#051A28;color-scheme:dark;overflow-x:clip}
.ab-g{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.ab-c{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--line);border-top:3px solid var(--sauge);border-radius:var(--r);padding:24px;background:rgba(255,255,255,.025);transition:border-color .3s,transform .3s}
.ab-i{display:inline-flex;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;margin-bottom:18px;background:rgba(122,143,126,.18);color:#00C2A8;border:1px solid rgba(122,143,126,.4)}
.ab-c:nth-child(even) .ab-i{color:#C9C3B7}
.ab-c h3{font-family:"Montserrat",system-ui,sans-serif;font-weight:500;font-size:1.2rem;margin:0 0 8px}
.ab-c p{color:var(--mut);margin:0;font-size:.92rem}
@media(max-width:1100px){.ab-g{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.ab-g{gap:10px;margin-top:26px}.ab-c{padding:16px}.ab-i{width:36px;height:36px;margin-bottom:10px}.ab-i svg{width:18px;height:18px}.ab-c h3{font-size:1rem;margin-bottom:4px}.ab-c p{font-size:.82rem;line-height:1.4}}
@media(max-width:340px){.ab-g{grid-template-columns:1fr}}


/* Section pleine largeur : lac Rang3 — photo fixe (sticky) + parallaxe douce, panneau qui défile par-dessus */
.lac{position:relative;isolation:isolate;overflow:hidden;display:block;padding:0!important;background:#0D3924;height:50vh;height:50svh;min-height:280px}
.lac-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.lac-img{position:absolute;left:0;right:0;top:0;height:calc(118vw * 941 / 1672);min-height:100%;will-change:transform;background:url(img/rang3-lac.jpg) 50% 0/cover no-repeat;background:image-set(url(img/rang3-lac.webp) type("image/webp"),url(img/rang3-lac.jpg) type("image/jpeg")) 50% 0/cover no-repeat}
@media(max-width:900px){.lac-img{background:url(img/rang3-lac.jpg) 50% 0/cover no-repeat;background:image-set(url(img/rang3-lac-m.webp) type("image/webp"),url(img/rang3-lac.jpg) type("image/jpeg")) 50% 0/cover no-repeat}}
.lac-card{position:absolute;right:clamp(16px,4vw,56px);bottom:clamp(16px,3vw,40px);z-index:1;max-width:min(440px,calc(100% - 32px));padding:clamp(18px,2.6vw,30px) clamp(20px,3vw,34px);border-radius:var(--r,22px);border:1px solid rgba(245,239,227,.18);background:rgba(13,57,36,.62);box-shadow:0 20px 50px -24px rgba(0,0,0,.5)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.lac-card{-webkit-backdrop-filter:blur(6px) saturate(1.1);backdrop-filter:blur(6px) saturate(1.1)}}
.lac-s{margin:0;font-family:"Fraunces",Georgia,serif!important;font-weight:400;font-size:clamp(1.4rem,2.6vw,2.2rem);line-height:1.15;color:#F5EFE3!important;text-wrap:balance;text-shadow:0 1px 8px rgba(0,0,0,.25)}
@media(prefers-reduced-motion:reduce){.lac-img{top:0;height:100%;background-position:50% 60%!important;transform:none!important;will-change:auto}}
/* Icônes animées au survol */
.ab-i{transition:background-color .25s,color .25s,transform .25s}.ab-i svg{transform-origin:50% 60%}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.ab-c:hover .ab-i,#secteurs .sc:hover .ico{background:#0D3924!important;color:#fff!important;border-color:#0D3924!important;transform:translateY(-2px)}
.ab-c:nth-of-type(1):hover .ab-i svg{animation:abi-pin .7s ease-out}
.ab-c:nth-of-type(2):hover .ab-i svg{animation:abi-beat .8s ease-in-out}
.ab-c:nth-of-type(3):hover .ab-i svg{animation:abi-draw .7s ease-in-out}
.ab-c:nth-of-type(4):hover .ab-i svg{animation:abi-pop .6s ease-out}}
@keyframes abi-pin{0%,100%{transform:none}30%{transform:translateY(-5px)}55%{transform:translateY(0)}75%{transform:translateY(-2px)}}
@keyframes abi-beat{0%,100%{transform:none}20%{transform:scale(1.2)}40%{transform:scale(.95)}60%{transform:scale(1.12)}}
@keyframes abi-draw{0%,100%{transform:none}25%{transform:rotate(-14deg)}50%{transform:rotate(10deg) translateX(2px)}75%{transform:rotate(-6deg)}}
@keyframes abi-pop{0%,100%{transform:none}40%{transform:scale(1.18) rotate(-6deg)}70%{transform:scale(.97)}}
#secteurs .sc .ico{transition:background-color .25s,color .25s,transform .25s}#secteurs .sc .ico svg{transform-origin:50% 60%}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
#secteurs .sc:hover .ico{animation:none!important}
#secteurs .sc:hover .ico :is(path,rect,circle){animation:none!important;stroke-dasharray:none!important}
#secteurs .sc{transition:transform .25s ease,border-color .25s,box-shadow .25s!important}
.js-ab .ab-c.on:hover,#secteurs .sc.rv.in:hover{transform:translateY(-4px)!important}
#secteurs .sc:nth-child(4n+1):hover .ico svg{animation:abi-pin .7s ease-out}
#secteurs .sc:nth-child(4n+2):hover .ico svg{animation:abi-beat .8s ease-in-out}
#secteurs .sc:nth-child(4n+3):hover .ico svg{animation:abi-draw .7s ease-in-out}
#secteurs .sc:nth-child(4n):hover .ico svg{animation:abi-pop .6s ease-out}}
html body #secteurs .sc:hover .ico,html body .ab-c:hover .ab-i{color:#fff!important}
/* À propos — option 4 — « Donne » : les cartes partent d’un paquet empilé et se distribuent + contour ocre tracé + attraction magnétique */
@property --ap-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --ap-v{syntax:'<number>';inherits:false;initial-value:0}
#apropos .ab-c{overflow:hidden}
#apropos .ab-c .ap-ring{position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:2;opacity:0;
 background:conic-gradient(from var(--ap-a),transparent 0 0,#C9932E 0 calc(var(--ap-v)*360deg),transparent 0);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
#apropos .ab-c .ab-i svg{animation:none!important}
@media (prefers-reduced-motion:no-preference){
 /* État « paquet » posé SANS transition (sinon Safari anime l’empilement au chargement et la donne ne se voit plus) */
 .ap-js #apropos .ab-c{transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--rot,0deg)) scale(.92);opacity:0;z-index:calc(10 - var(--i));transition:none}
 .ap-js #apropos .ab-g.on .ab-c{opacity:1;transform:none;transition:transform .85s cubic-bezier(.34,1.35,.64,1),opacity .3s ease;transition-delay:calc(var(--i)*140ms + .25s),0s}
 .ap-js #apropos .ab-g.dealt .ab-c{transform:translate(var(--gx,0px),var(--gy,0px));transition:transform .5s cubic-bezier(.34,1.5,.64,1);transition-delay:0s}
 .ap-js #apropos .ab-g.dealt .ab-c.gone{transition:transform .9s cubic-bezier(.34,1.6,.64,1)}
 .ap-js #apropos .ab-g.dealt .ab-c .ap-ring{animation:s4-trace 1.3s cubic-bezier(.5,0,.2,1) calc(var(--i)*120ms) both}
 @media (hover:hover){.ap-js #apropos .ab-g.dealt .ab-c:hover .ap-ring{animation:s4-trace2 1.1s cubic-bezier(.5,0,.2,1) both}}
}
#apropos .ab-c:is(:hover,:focus-within) .ab-i{background:#0D3924!important;color:#C9932E!important;border-color:#0D3924!important}
html[data-theme=dark] #apropos .ab-c:is(:hover,:focus-within) .ab-i{background:#C9932E!important;color:#0B1F16!important}
@keyframes s4-trace{0%{opacity:1;--ap-v:0;--ap-a:0deg}70%{opacity:1;--ap-v:1;--ap-a:90deg}100%{opacity:0;--ap-v:1;--ap-a:120deg}}
@keyframes s4-trace2{0%{opacity:1;--ap-v:0;--ap-a:0deg}100%{opacity:1;--ap-v:1;--ap-a:180deg}}