/* ═══════════════════════════════════════════════════════════════════════
   TWKL VENTURE × AGIR ENSEMBLE — palette et encadrement partages
   SOURCE : site/chrome.css. Servi aux pages publiques (assets/site.css)
   et injecte dans les outils par build.js. Ne pas modifier les copies.

   PALETTE — construite sur les deux logos, pas a cote d'eux :
     prune et feuille viennent de l'arbre d'Agir Ensemble, l'encre du
     ciel etoile de TWKL. Contrastes WCAG calcules, pas estimes :

     encre    #17152F  17,7 blanc · 16,7 creme       texte, bandes sombres
     graphite #302C4D  13,2 blanc
     ardoise  #5B5873   6,8 blanc ·  6,4 creme       texte secondaire
     prune    #7A1F7E   9,0 blanc ·  8,5 creme       marque, boutons, liens
     feuille  #2E7A2F   5,3 blanc ·  4,8 voile vert  impact, validation
     soleil-t #9A4E07   6,1 blanc                    primes (texte)
     feuille-vif #5FB53A · soleil #E08A2C            DECOR ou texte sur encre
                                                     (6,9 et 6,6), jamais
                                                     sur fond clair
   Les tokens sont prefixes --sx- : les outils ont deja leurs --bg,
   --text, --acc… et ils doivent continuer a vivre a cote.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --sx-blanc:#FFFFFF; --sx-creme:#FBF8F4; --sx-sable:#F4EFE8;
  --sx-encre:#17152F; --sx-graphite:#302C4D; --sx-ardoise:#5B5873;
  --sx-prune:#7A1F7E; --sx-prune-f:#621764; --sx-prune-v:#F7EEF7; --sx-prune-rgb:122,31,126;
  --sx-feuille:#2E7A2F; --sx-feuille-vif:#5FB53A; --sx-feuille-v:#EEF6EA;
  --sx-soleil:#E08A2C; --sx-soleil-t:#9A4E07; --sx-soleil-v:#FDF3E6;
  --sx-trait:#EAE4DC; --sx-trait-f:#D8CFC4;
  --sx-titre:'Poppins',system-ui,-apple-system,sans-serif;
  --sx-texte:'Inter',system-ui,-apple-system,sans-serif;
  --sx-mono:'JetBrains Mono',ui-monospace,monospace;
  --sx-souple:cubic-bezier(.22,.68,.32,1);
  --sx-large:1220px;
}

.sx-bandeau,.sx-tete,.sx-tiroir,.sx-pied,
.sx-bandeau *,.sx-tete *,.sx-tiroir *,.sx-pied *{box-sizing:border-box}
.sx-large{width:100%;max-width:var(--sx-large);margin:0 auto;padding:0 clamp(16px,3.4vw,28px)}
.sx-mono{font-family:var(--sx-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ═══ BANDEAU ══════════════════════════════════════════════════════════ */
.sx-bandeau{background:var(--sx-encre);color:rgba(255,255,255,.8);font:500 12.5px/1.4 var(--sx-texte);
  padding:9px 0}
.sx-bandeau .sx-large{display:flex;align-items:center;justify-content:center;gap:10px;text-align:center}
.sx-bandeau b{color:#fff;font-weight:700}
.sx-point{width:6px;height:6px;border-radius:50%;background:var(--sx-feuille-vif);flex-shrink:0;
  box-shadow:0 0 0 3px rgba(95,181,58,.22);animation:sx-battement 2.8s ease-in-out infinite}
@keyframes sx-battement{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}

/* ═══ EN-TETE ══════════════════════════════════════════════════════════ */
.sx-tete{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border-bottom:1px solid transparent;transition:border-color .3s, box-shadow .3s;
  font-family:var(--sx-texte)}
.sx-tete.colle{border-bottom-color:var(--sx-trait);box-shadow:0 12px 30px -28px rgba(23,21,47,.9)}
.sx-nav{display:flex;align-items:center;gap:18px;height:80px;transition:height .3s var(--sx-souple)}
.sx-tete.colle .sx-nav{height:70px}

.sx-marque{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--sx-encre);flex-shrink:0}
.sx-marque-twkl{width:50px;height:50px;border-radius:50%;display:block;
  box-shadow:0 4px 12px -6px rgba(23,21,47,.6)}
.sx-marque-txt{display:block;line-height:1.15}
.sx-marque-txt b{display:block;font:800 1rem/1.15 var(--sx-titre);letter-spacing:-.03em;color:var(--sx-encre)}
.sx-marque-txt small{display:block;font:700 9.5px/1.2 var(--sx-texte);letter-spacing:1px;
  text-transform:uppercase;color:var(--sx-prune);margin-top:2px}
/* Le logo de l'ASBL est vertical (652 × 893) : on le cale sur la hauteur,
   et un filet le separe de TWKL — deux marques accolees sans separation se
   lisent comme une fusion, ce qu'elles ne sont pas. */
.sx-marque-ae{width:auto;height:56px;display:block;padding-left:11px;border-left:1px solid var(--sx-trait-f)}

.sx-liens{display:flex;align-items:center;gap:2px;margin-left:auto}
.sx-liens a{position:relative;text-decoration:none;font:600 14.4px/1 var(--sx-texte);color:var(--sx-ardoise);
  padding:11px 13px;border-radius:10px;transition:color .2s, background .2s}
.sx-liens a:hover{color:var(--sx-encre);background:var(--sx-creme)}
.sx-liens a.actif{color:var(--sx-encre)}
.sx-liens a.actif::after{content:'';position:absolute;left:13px;right:13px;bottom:3px;height:2px;
  border-radius:2px;background:var(--sx-prune)}

.sx-outils{display:flex;align-items:center;gap:10px;flex-shrink:0}
.sx-lang{display:flex;gap:2px;padding:3px;border:1px solid var(--sx-trait);border-radius:99px}
.sx-lang button{border:0;background:none;cursor:pointer;padding:5px 9px;border-radius:99px;
  font:700 11px/1 var(--sx-texte);letter-spacing:.04em;color:var(--sx-ardoise)}
.sx-lang button[aria-pressed="true"]{background:var(--sx-encre);color:#fff}
.sx-lang a{text-decoration:none;padding:5px 9px;border-radius:99px;font:700 11px/1 var(--sx-texte);
  letter-spacing:.04em;color:var(--sx-ardoise);transition:background .2s,color .2s}
.sx-lang a:hover{color:var(--sx-encre);background:var(--sx-creme)}
.sx-lang a[aria-current]{background:var(--sx-encre);color:#fff}
.sx-tiroir-lang{margin-top:22px;display:flex;justify-content:center}
.sx-tiroir-lang .sx-lang{display:flex}
.sx-tiroir-lang .sx-lang a,.sx-tiroir-lang .sx-lang button{padding:9px 16px;font-size:13px}

.sx-client{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font:600 13.6px/1 var(--sx-texte);color:var(--sx-graphite);padding:10px 14px;border-radius:11px;
  border:1px solid var(--sx-trait-f);background:#fff;transition:border-color .2s, color .2s}
.sx-client svg{width:15px;height:15px;flex-shrink:0}
.sx-client:hover,.sx-client[aria-current]{border-color:var(--sx-prune);color:var(--sx-prune)}
.sx-cta{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  font:600 13.8px/1 var(--sx-titre);letter-spacing:-.01em;color:#fff;background:var(--sx-prune);
  padding:12px 18px;border-radius:11px;box-shadow:0 10px 22px -14px rgba(var(--sx-prune-rgb),.95);
  transition:background .2s, transform .2s var(--sx-souple)}
.sx-cta:hover{background:var(--sx-prune-f);transform:translateY(-1px)}

.sx-burger{display:none;position:relative;z-index:1001;width:42px;height:42px;padding:0;border:0;
  border-radius:11px;background:none;cursor:pointer}
.sx-burger i{position:absolute;left:10px;width:22px;height:2px;border-radius:2px;background:var(--sx-encre);
  transition:transform .3s var(--sx-souple), opacity .2s, top .3s var(--sx-souple)}
.sx-burger i:nth-child(1){top:13px}.sx-burger i:nth-child(2){top:20px}.sx-burger i:nth-child(3){top:27px}
.sx-burger.x i:nth-child(1){top:20px;transform:rotate(45deg)}
.sx-burger.x i:nth-child(2){opacity:0}
.sx-burger.x i:nth-child(3){top:20px;transform:rotate(-45deg)}
.sx-burger:focus-visible,.sx-cta:focus-visible,.sx-client:focus-visible,.sx-liens a:focus-visible{
  outline:2px solid var(--sx-prune);outline-offset:2px}

/* Tiroir mobile : hors du <header>, sinon son backdrop-filter devient le
   bloc conteneur du position:fixed et le tiroir se limite a sa hauteur. */
.sx-tiroir{display:none;position:fixed;inset:0;z-index:890;background:#fff;overflow-y:auto;
  padding:calc(var(--fx-nav-h,74px) + 18px) clamp(18px,5vw,32px) 32px;font-family:var(--sx-texte)}
.sx-tiroir.open{display:flex;flex-direction:column}
.sx-tiroir nav{display:flex;flex-direction:column}
.sx-tiroir nav a{text-decoration:none;color:var(--sx-encre);font:600 1.15rem/1.2 var(--sx-titre);
  letter-spacing:-.02em;padding:17px 2px;border-bottom:1px solid var(--sx-trait)}
.sx-tiroir nav a.actif{color:var(--sx-prune)}
.sx-cta-bloc{margin-top:24px;padding:16px;font-size:15px}
.sx-tiroir-note{margin-top:18px;text-align:center;font-size:12.5px;color:var(--sx-ardoise)}

/* ═══ PIED DE PAGE ═════════════════════════════════════════════════════ */
.sx-pied{background:var(--sx-encre);color:rgba(255,255,255,.72);padding:0 0 34px;
  font:400 14px/1.65 var(--sx-texte)}
.sx-pied a{color:inherit}
.sx-pied-ae{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:22px;align-items:center;
  background:#fff;color:var(--sx-encre);border-radius:20px;padding:22px 26px;
  /* Chevauche la section precedente. « top » plutot qu'une marge negative :
     le pied n'a pas de rembourrage haut, une marge negative traverserait
     le <footer> et le remonterait tout entier. */
  position:relative;top:-40px;margin-bottom:-12px;border:1px solid var(--sx-trait);
  box-shadow:0 30px 60px -34px rgba(23,21,47,.55)}
.sx-pied-ae img{height:86px;width:auto}
.sx-pied-ae-txt b{display:block;font:700 1.05rem/1.3 var(--sx-titre);letter-spacing:-.02em;color:var(--sx-encre)}
.sx-pied-ae-txt p{margin:4px 0 0;font-size:13.6px;color:var(--sx-ardoise);line-height:1.55}
.sx-pied-ae-iban{text-align:right}
.sx-pied-ae-iban span{display:block;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--sx-ardoise)}
.sx-pied-ae-iban b{display:block;font-size:15px;color:var(--sx-encre);margin-top:3px;white-space:nowrap}
.sx-pied-ae-lien{text-decoration:none;font:600 13.6px/1 var(--sx-titre);color:#fff !important;
  background:var(--sx-feuille);padding:13px 18px;border-radius:11px;white-space:nowrap;transition:background .2s}
.sx-pied-ae-lien:hover{background:#246226}

.sx-pied-haut{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding:8px 0 34px;
  border-bottom:1px solid rgba(255,255,255,.13)}
.sx-pied-logos{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.sx-pied-logos img{display:block;width:auto;height:64px}
.sx-pied-logos img.sx-rond{height:60px;width:60px;border-radius:50%}
.sx-pied-logos .sx-sep{width:1px;height:40px;background:rgba(255,255,255,.22)}
/* Le logo d'Agir Ensemble est pense pour un fond clair : pose sur une
   pastille blanche, il garde ses couleurs au lieu de disparaitre. */
.sx-pied-logos img:last-child{background:#fff;border-radius:14px;padding:6px 8px;height:80px}
.sx-pied-marque p{font-size:13.6px;max-width:36ch;margin:0}
.sx-reseaux{display:flex;gap:9px;margin-top:18px}
.sx-reseaux a{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:#fff;transition:background .2s, transform .2s var(--sx-souple)}
.sx-reseaux a:hover{background:var(--sx-prune);transform:translateY(-2px)}
.sx-reseaux svg{width:16px;height:16px;display:block}
.sx-pied-col h2{font:700 11.5px/1.3 var(--sx-titre);letter-spacing:1.2px;text-transform:uppercase;
  color:#fff;margin:0 0 12px}
.sx-pied-col a{display:block;text-decoration:none;padding:5px 0;color:rgba(255,255,255,.7);transition:color .2s}
.sx-pied-col a:hover{color:#fff}
.sx-pied-bas{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-top:24px;
  font-size:12.5px;color:rgba(255,255,255,.6)}
.sx-pied-legal{display:flex;gap:18px;flex-wrap:wrap}
.sx-pied-legal a{text-decoration:none}
.sx-pied-legal a:hover{color:#fff}
.sx-pied a:focus-visible{outline:2px solid var(--sx-feuille-vif);outline-offset:2px;border-radius:4px}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════ */
@media (max-width:1120px){
  .sx-liens a{padding:11px 9px;font-size:13.8px}
  .sx-nav .sx-client span{display:none}
  .sx-nav .sx-client{padding:10px 12px}
}
@media (max-width:980px){
  .sx-liens,.sx-client,.sx-nav .sx-lang{display:none}
  .sx-burger{display:block}
  .sx-outils{margin-left:auto}
  .sx-pied-haut{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sx-pied-marque{grid-column:1/-1}
  .sx-pied-ae{grid-template-columns:auto minmax(0,1fr)}
  .sx-pied-ae-iban{text-align:left;grid-column:2}
  .sx-pied-ae-lien{grid-column:2;justify-self:start}
}
@media (max-width:620px){
  .sx-bandeau{font-size:11.5px}
  .sx-nav{height:66px;gap:10px}
  .sx-marque-txt small{display:none}
  .sx-marque-ae{height:46px;padding-left:9px}
  .sx-marque-twkl{width:42px;height:42px}
  .sx-cta{padding:11px 14px;font-size:13px}
  .sx-pied-haut{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-pied-ae{grid-template-columns:minmax(0,1fr);padding:22px;text-align:left}
  .sx-pied-ae img{height:56px}
  .sx-pied-ae-iban,.sx-pied-ae-lien{grid-column:auto}
}
@media (max-width:400px){
  .sx-outils .sx-cta{display:none}
  .sx-marque-txt b{font-size:.92rem}
}
/* ═══ WHATSAPP — messages ecrits uniquement ════════════════════════════ */
.sx-wa{position:fixed;right:18px;bottom:18px;z-index:880;font-family:var(--sx-texte)}
.sx-wa summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  background:#25D366;color:#073B1C;border-radius:99px;padding:7px 18px 7px 7px;
  box-shadow:0 14px 30px -12px rgba(7,59,28,.7);transition:transform .25s var(--sx-souple), box-shadow .25s}
.sx-wa summary::-webkit-details-marker{display:none}
.sx-wa summary:hover{transform:translateY(-2px)}
.sx-wa summary:focus-visible{outline:3px solid var(--sx-encre);outline-offset:3px}
.sx-wa-rond{width:40px;height:40px;border-radius:50%;background:#fff;color:#1DA851;display:grid;place-items:center;flex-shrink:0}
.sx-wa-rond svg{width:22px;height:22px;display:block}
.sx-wa-etiq{font:700 14px/1 var(--sx-titre);letter-spacing:-.01em}
.sx-wa summary::before{content:'';position:absolute;left:7px;top:7px;width:40px;height:40px;border-radius:50%;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:sx-wa-pouls 2.6s ease-out infinite;pointer-events:none}
@keyframes sx-wa-pouls{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%,100%{box-shadow:0 0 0 16px rgba(37,211,102,0)}}
.sx-wa[open] summary{background:var(--sx-encre);color:#fff}
.sx-wa[open] summary::before{animation:none}
.sx-wa-panneau{position:absolute;right:0;bottom:calc(100% + 12px);width:min(360px,calc(100vw - 36px));
  background:#fff;border-radius:20px;overflow:hidden;border:1px solid var(--sx-trait);
  box-shadow:0 30px 70px -26px rgba(23,21,47,.55);animation:sx-wa-ouvre .28s var(--sx-souple)}
@keyframes sx-wa-ouvre{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.sx-wa-tete{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#075E54;color:#fff}
.sx-wa-tete b{display:block;font:700 15px/1.2 var(--sx-titre)}
.sx-wa-tete span:not(.sx-wa-rond){display:block;font-size:12px;opacity:.85;margin-top:2px}
.sx-wa-corps{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;max-height:min(62vh,520px);overflow-y:auto;
  background:#F4EFE8}
.sx-wa-alerte{display:flex;gap:10px;align-items:flex-start;margin:0 0 4px;padding:11px 12px;border-radius:12px;
  background:#FFF7E0;border:1px solid #F2D9A0;color:#5C3A04;font-size:12.8px;line-height:1.5}
.sx-wa-alerte svg{width:20px;height:20px;flex-shrink:0;color:#9A4E07;margin-top:1px}
.sx-wa-label{font:700 11px/1.3 var(--sx-titre);letter-spacing:.8px;text-transform:uppercase;color:var(--sx-ardoise);margin-top:4px}
.sx-wa-msg{display:block;text-decoration:none;background:#fff;color:var(--sx-encre);font-size:13.6px;line-height:1.45;
  padding:10px 12px;border-radius:12px 12px 12px 4px;border:1px solid var(--sx-trait);transition:border-color .2s, transform .2s var(--sx-souple)}
.sx-wa-msg:hover{border-color:#25D366;transform:translateX(3px)}
.sx-wa-libre{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.sx-wa-libre label{font:700 11px/1.3 var(--sx-titre);letter-spacing:.8px;text-transform:uppercase;color:var(--sx-ardoise)}
.sx-wa-libre textarea{width:100%;box-sizing:border-box;resize:vertical;border:1.5px solid var(--sx-trait-f);border-radius:12px;
  padding:10px 12px;font:400 14px/1.45 var(--sx-texte);color:var(--sx-encre);background:#fff}
.sx-wa-libre textarea:focus{outline:none;border-color:#1DA851;box-shadow:0 0 0 3px rgba(37,211,102,.2)}
.sx-wa-libre button{border:0;cursor:pointer;background:#1DA851;color:#fff;font:600 14px/1 var(--sx-titre);
  padding:12px;border-radius:12px;transition:background .2s}
.sx-wa-libre button:hover{background:#128C4B}
.sx-wa-num{font-size:11.5px;color:var(--sx-ardoise);text-align:center;margin-top:2px}
@media (max-width:620px){
  .sx-wa{right:12px;bottom:12px}
  .sx-wa-etiq{display:none}
  .sx-wa summary{padding:7px}
}

@media (prefers-reduced-motion:reduce){
  .sx-point,.sx-wa summary::before{animation:none}
  .sx-tete,.sx-nav,.sx-cta,.sx-burger i{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   SITE PUBLIC — TWKL Venture au profit d'Agir Ensemble ASBL
   SOURCE : site/site.css (la palette et l'encadrement sont dans
   site/chrome.css, concatenes devant ce fichier dans assets/site.css).

   Ligne directrice : Agir Ensemble n'est pas un argument en bas de page,
   c'est la raison d'etre du studio. Le terrain ouvre le site, les
   prestations suivent. Les photos sont celles de l'association.

   Typographie : Poppins (titres), Inter (texte), JetBrains Mono (chiffres).
   ═══════════════════════════════════════════════════════════════════════ */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{font-family:var(--sx-texte);color:var(--sx-encre);background:var(--sx-blanc);
  font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:rgba(var(--sx-prune-rgb),.16)}
.large{max-width:var(--sx-large);margin:0 auto;padding:0 clamp(16px,3.4vw,28px)}
.etroit{max-width:840px;margin:0 auto;padding:0 clamp(16px,3.4vw,28px)}
.grille > *{min-width:0}
.skip-link{position:absolute;left:-999px;top:8px;z-index:2000;background:var(--sx-encre);color:#fff;
  padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600}
.skip-link:focus{left:12px}
:focus-visible{outline:2px solid var(--sx-prune);outline-offset:3px}

h1,h2,h3,h4{font-family:var(--sx-titre);font-weight:700;letter-spacing:-.028em;line-height:1.14;
  color:var(--sx-encre)}
h1{font-size:clamp(2.35rem,1.4rem + 3.6vw,4.2rem);font-weight:800;line-height:1.05}
h2{font-size:clamp(1.85rem,1.3rem + 2.2vw,2.85rem)}
h3{font-size:1.2rem;line-height:1.32}
h4{font-size:1rem}
h1,h2,h3,h4,p,li{overflow-wrap:break-word}
h1,h2,h3,.chapeau{text-wrap:balance}
strong{font-weight:700;color:inherit}

.sur{font-family:var(--sx-titre);font-size:.74rem;font-weight:700;text-transform:uppercase;
  letter-spacing:1.5px;color:var(--sx-prune);display:inline-flex;align-items:center;gap:9px}
.sur::before{content:'';width:20px;height:2px;background:currentColor;border-radius:2px}
.sur.feuille{color:var(--sx-feuille)}
.sur.soleil{color:var(--sx-soleil-t)}
.sur.clair{color:#fff}
.sur.clair::before{background:var(--sx-feuille-vif)}
.chapeau{font-size:1.08rem;color:var(--sx-ardoise);max-width:62ch;line-height:1.78}
.mono{font-family:var(--sx-mono);font-variant-numeric:tabular-nums}
.petit{font-size:13.2px;color:var(--sx-ardoise);line-height:1.6}
.surligne{background:linear-gradient(transparent 62%, rgba(95,181,58,.28) 62%);padding:0 2px}

/* ═══ MOUVEMENT ════════════════════════════════════════════════════════ */
.rev{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--sx-souple), transform .7s var(--sx-souple)}
.rev.vu{opacity:1;transform:none}
.rev-d1{transition-delay:.06s}.rev-d2{transition-delay:.12s}.rev-d3{transition-delay:.18s}
.rev-d4{transition-delay:.24s}.rev-d5{transition-delay:.30s}.rev-d6{transition-delay:.36s}
/* Sans JavaScript, tout reste visible : la classe « js » n'est posee que
   si le script tourne. */
html:not(.js) .rev{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
}

/* ═══ ICONES ═══════════════════════════════════════════════════════════ */
.ico{width:46px;height:46px;border-radius:14px;display:inline-grid;place-items:center;flex-shrink:0;
  background:var(--sx-sable);color:var(--sx-encre)}
.ico svg{width:22px;height:22px;display:block}
.ico.prune{background:var(--sx-prune-v);color:var(--sx-prune)}
.ico.feuille{background:var(--sx-feuille-v);color:var(--sx-feuille)}
.ico.soleil{background:var(--sx-soleil-v);color:var(--sx-soleil-t)}
.ico.encre{background:var(--sx-encre);color:#fff}
.ico.blanc{background:rgba(255,255,255,.14);color:#fff}
.ico-lg{width:58px;height:58px;border-radius:17px}
.ico-lg svg{width:27px;height:27px}
.ico-nu{width:18px;height:18px;display:inline-block;vertical-align:-3px;color:inherit}
.ico-nu svg{width:18px;height:18px;display:block}

/* ═══ BOUTONS ══════════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:12px;
  font-family:var(--sx-titre);font-weight:600;font-size:14.6px;text-decoration:none;padding:14px 24px;
  border:0;cursor:pointer;letter-spacing:-.012em;line-height:1.2;
  transition:transform .2s var(--sx-souple), box-shadow .26s, background .2s, border-color .2s, color .2s}
.btn svg{width:17px;height:17px;flex-shrink:0}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-prune{background:var(--sx-prune);color:#fff;box-shadow:0 12px 26px -14px rgba(var(--sx-prune-rgb),.95)}
.btn-prune:hover{background:var(--sx-prune-f)}
.btn-feuille{background:var(--sx-feuille);color:#fff;box-shadow:0 12px 26px -14px rgba(46,122,47,.9)}
.btn-feuille:hover{background:#246226}
.btn-encre{background:var(--sx-encre);color:#fff}
.btn-contour{border:1.5px solid var(--sx-trait-f);color:var(--sx-encre);background:#fff}
.btn-contour:hover{border-color:var(--sx-encre)}
/* Sur photo : fond plein. Un bouton translucide devient illisible des
   que la photo s'eclaircit sous lui. */
.btn-blanc{background:#fff;color:var(--sx-encre);box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.btn-blanc:hover{background:var(--sx-creme)}
.btn-voile{background:rgba(23,21,47,.55);color:#fff;border:1.5px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn-voile:hover{background:rgba(23,21,47,.75);border-color:#fff}
.btn-sm{padding:10px 16px;font-size:13.5px}
.btn-bloc{width:100%}
.lien-fleche{display:inline-flex;align-items:center;gap:7px;font:600 14.4px/1.3 var(--sx-titre);
  color:var(--sx-prune);text-decoration:none}
.lien-fleche svg{width:16px;height:16px;transition:transform .25s var(--sx-souple)}
.lien-fleche:hover svg{transform:translateX(4px)}

/* ═══ SECTIONS ═════════════════════════════════════════════════════════ */
section{padding:clamp(70px,8vw,108px) 0;position:relative}
.sec-creme{background:var(--sx-creme)}
.sec-sable{background:var(--sx-sable)}
.sec-encre{background:var(--sx-encre);color:rgba(255,255,255,.78)}
.sec-encre h2,.sec-encre h3,.sec-encre h4{color:#fff}
.sec-tete{max-width:66ch;margin-bottom:clamp(36px,4.5vw,54px)}
.sec-tete h2{margin:14px 0 18px}
.sec-tete.centre{margin-left:auto;margin-right:auto;text-align:center}
.sec-tete.centre .sur{justify-content:center}
.sec-tete.centre .chapeau{margin-left:auto;margin-right:auto}
.sec-encre .chapeau{color:rgba(255,255,255,.8)}
.centre-txt{text-align:center}
.pied-sec{text-align:center;margin-top:clamp(32px,4vw,44px)}

/* ═══ HERO IMMERSIF ════════════════════════════════════════════════════
   Texte blanc sur photo : un voile en degrade, plus dense a gauche ou se
   trouve le texte. Teinte encre-prune, accordee a la palette : une photo
   chaude sous un voile neutre donne l'impression de deux sites colles. */
.hero{position:relative;min-height:min(88vh,780px);display:flex;align-items:center;
  padding:clamp(80px,9vw,112px) 0 clamp(84px,9vw,104px);overflow:hidden;background:var(--sx-encre);color:#fff}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.hero-voile{position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(20,16,40,.95) 0%, rgba(24,17,46,.9) 36%,
                            rgba(40,20,56,.66) 62%, rgba(58,22,70,.38) 100%),
    linear-gradient(to top, rgba(18,14,36,.75), transparent 45%)}
.hero .large{position:relative;z-index:2;width:100%}
.hero-grille{display:grid;grid-template-columns:minmax(0,1fr) 410px;gap:56px;align-items:center}
.hero-txt{max-width:46rem}
.hero .sur{background:rgba(20,16,40,.62);padding:7px 15px;border-radius:99px;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.hero h1{color:#fff;margin:22px 0 22px}
.hero h1 em{font-style:normal;color:var(--sx-feuille-vif)}
.hero-txt > p{font-size:1.14rem;color:rgba(255,255,255,.9);max-width:56ch;line-height:1.72}
.hero-txt > p strong{color:#fff}
.hero-actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero-chiffres{display:flex;gap:clamp(22px,3.4vw,40px);margin-top:44px;flex-wrap:wrap;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.2)}
.hero-chiffres b{display:block;font-family:var(--sx-titre);font-size:1.85rem;font-weight:800;color:#fff;
  line-height:1;letter-spacing:-.035em}
.hero-chiffres span{display:block;margin-top:7px;font-size:12.8px;color:rgba(255,255,255,.84);font-weight:500;
  max-width:18ch;line-height:1.45}
.hero-credit{position:absolute;right:16px;bottom:12px;z-index:2;font-size:10.5px;color:rgba(255,255,255,.7)}

/* La carte de l'association, posee sur la photo : c'est elle, pas nous,
   que le visiteur doit voir en premier. */
.carte-ae{background:rgba(255,255,255,.98);color:var(--sx-encre);border-radius:26px;padding:0;overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
/* La carte de l'association : photo du terrain en tete, puis l'identite.
   Elle doit peser autant que le titre a cote, pas faire figure de note. */
.carte-ae-photo{position:relative;aspect-ratio:16/8.6;overflow:hidden;margin:0}
.carte-ae-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--sx-souple)}
.carte-ae:hover .carte-ae-photo img{transform:scale(1.05)}
.carte-ae-photo figcaption{position:absolute;left:14px;bottom:12px;background:var(--sx-feuille);color:#fff;
  font:700 12.5px/1 var(--sx-titre);padding:8px 12px;border-radius:99px;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.carte-ae-in{padding:22px 26px 24px}
.carte-ae-tete{display:flex;align-items:center;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--sx-trait)}
.carte-ae-tete img{height:88px;width:auto;flex-shrink:0}
.carte-ae-tete b{display:block;font:700 1.22rem/1.2 var(--sx-titre);letter-spacing:-.025em}
.carte-ae-tete div span{display:block;font-size:12.4px;color:var(--sx-ardoise);margin-top:2px}
.carte-ae ul{list-style:none;padding:14px 0 4px;display:grid;gap:9px}
.carte-ae li{display:flex;gap:11px;font-size:14.6px;color:var(--sx-graphite);line-height:1.45}
.carte-ae li .ico-nu{color:var(--sx-feuille);flex-shrink:0;margin-top:1px}
.carte-ae .lien-fleche{margin-top:14px;font-size:14.6px}

/* Hero des pages interieures */
.hero-court{position:relative;overflow:hidden;padding:clamp(60px,7vw,84px) 0 clamp(52px,6vw,68px);
  background:var(--sx-creme)}
.hero-court::after{content:'';position:absolute;right:-120px;top:-140px;width:460px;height:460px;
  border-radius:50%;background:radial-gradient(circle, rgba(var(--sx-prune-rgb),.10), transparent 68%);
  pointer-events:none}
.hero-court.feuille::after{background:radial-gradient(circle, rgba(95,181,58,.16), transparent 68%)}
.hero-court.soleil::after{background:radial-gradient(circle, rgba(224,138,44,.18), transparent 68%)}
.hero-court .large{position:relative;z-index:1}
.hero-court h1{margin:14px 0 0;font-size:clamp(2.2rem,1.4rem + 3vw,3.6rem)}
.hero-court .chapeau{margin-top:18px}
.fil{font-size:12.6px;color:var(--sx-ardoise);margin-bottom:16px;font-weight:600}
.fil a{text-decoration:none;color:var(--sx-ardoise)}
.fil a:hover{color:var(--sx-encre)}

/* Hero en deux colonnes avec photo (page mission) */
.hero-duo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px;align-items:center}
.hero-duo-img{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:5/4;
  box-shadow:0 40px 80px -40px rgba(23,21,47,.55)}
.hero-duo-img img{width:100%;height:100%;object-fit:cover}
.hero-duo-img figcaption{position:absolute;left:14px;bottom:12px;font-size:11px;color:#fff;
  background:rgba(20,16,40,.6);padding:4px 10px;border-radius:99px}

/* ═══ LE CERCLE — votre projet → notre marge → le terrain ══════════════ */
.cercle{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;position:relative;counter-reset:etape}
.cercle-e{position:relative;background:#fff;border:1px solid var(--sx-trait);border-radius:22px;padding:30px 28px 28px}
.cercle-e::before{counter-increment:etape;content:counter(etape);position:absolute;top:26px;right:26px;
  font:800 2.6rem/1 var(--sx-titre);letter-spacing:-.05em;color:var(--sx-sable)}
.cercle-e h3{margin:18px 0 8px}
.cercle-e p{font-size:14.8px;color:var(--sx-ardoise)}
/* La fleche entre deux etapes : elle dit que c'est une chaine, pas trois
   arguments juxtaposes. */
.cercle-e:not(:last-child)::after{content:'';position:absolute;right:-17px;top:50%;width:12px;height:12px;
  border-top:2px solid var(--sx-trait-f);border-right:2px solid var(--sx-trait-f);
  transform:translateY(-50%) rotate(45deg);z-index:2;background:transparent}
.cercle-e.final{background:var(--sx-feuille-v);border-color:#CFE6C4}
.cercle-e.final::before{color:#D5EBCB}
.cercle-e.final .ico{background:#fff}
.cercle-note{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:28px;flex-wrap:wrap;
  font-size:14px;color:var(--sx-ardoise);text-align:center}

/* ═══ CARTES ═══════════════════════════════════════════════════════════ */
.cartes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.cartes-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.cartes-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}

.carte{background:#fff;border:1px solid var(--sx-trait);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .3s var(--sx-souple), box-shadow .3s, border-color .3s}
a.carte{text-decoration:none;color:inherit}
.carte:hover{transform:translateY(-4px);border-color:var(--sx-trait-f);
  box-shadow:0 2px 6px rgba(23,21,47,.04), 0 24px 46px -26px rgba(23,21,47,.3)}
.carte-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sx-sable)}
.carte-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--sx-souple)}
.carte:hover .carte-img img{transform:scale(1.045)}
.carte-tag{position:absolute;left:13px;top:13px;background:rgba(255,255,255,.96);color:var(--sx-encre);
  font:700 10.5px/1 var(--sx-titre);letter-spacing:.7px;text-transform:uppercase;padding:7px 11px;
  border-radius:99px}
.carte-tag.prune{background:var(--sx-prune);color:#fff}
.carte-tag.feuille{background:var(--sx-feuille);color:#fff}
/* Carte d'action sans photo : une icone sur un fond de feuillage. */
.carte-img-ico{display:grid;place-items:center;
  background:radial-gradient(circle at 30% 30%, #fff 0 18%, transparent 19%),
             linear-gradient(150deg, var(--sx-feuille-v), #DDEFD3)}
.carte-img-ico .ico{width:78px;height:78px;border-radius:24px;background:#fff;box-shadow:0 16px 30px -18px rgba(46,122,47,.6)}
.carte-img-ico .ico svg{width:36px;height:36px}
.carte-corps{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.carte-corps h3{margin-bottom:9px}
.carte-corps p,.carte-nue p{font-size:14.6px;color:var(--sx-ardoise)}
.carte ul{list-style:none;font-size:14.2px;color:var(--sx-ardoise);margin:14px 0 18px}
.carte ul li{padding:5px 0 5px 24px;position:relative}
.carte ul li::before{content:'';position:absolute;left:3px;top:.86em;width:8px;height:8px;border-radius:50%;
  border:2px solid var(--sx-prune);opacity:.55}
.carte-pied{display:flex;align-items:center;gap:8px 10px;padding-top:16px;margin-top:auto;
  border-top:1px solid var(--sx-trait);flex-wrap:wrap;font-size:12.8px;color:var(--sx-ardoise)}
/* Le pied reste colle en bas (margin-top:auto) : l'espace au-dessus vient
   du bloc precedent, sinon les pieds d'une meme rangee ne s'alignent plus. */
.carte-corps > p:not(:last-child),.carte-nue > p:not(:last-child){margin-bottom:16px}
.carte-nue{padding:28px}
.carte-nue h3{margin:16px 0 9px}

.jalon{display:inline-flex;align-items:center;gap:7px;background:var(--sx-sable);color:var(--sx-graphite);
  font:700 11.5px/1 var(--sx-titre);letter-spacing:.3px;padding:7px 11px;border-radius:99px}
.jalon.prune{background:var(--sx-prune-v);color:var(--sx-prune)}
.jalon.feuille{background:var(--sx-feuille-v);color:var(--sx-feuille)}
.jalon.soleil{background:var(--sx-soleil-v);color:var(--sx-soleil-t)}
.etiquettes{display:flex;gap:8px;flex-wrap:wrap}

/* ═══ BLOC PHOTO + TEXTE, MOSAIQUE ═════════════════════════════════════ */
.duo-photo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,64px);align-items:center}
.duo-photo.inverse > :first-child{order:2}
.duo-img{border-radius:22px;overflow:hidden;position:relative;
  box-shadow:0 30px 60px -36px rgba(23,21,47,.5)}
.duo-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.badge-photo{position:absolute;left:18px;bottom:18px;background:rgba(255,255,255,.97);border-radius:14px;
  padding:12px 17px;box-shadow:0 18px 36px -18px rgba(0,0,0,.45)}
.badge-photo b{display:block;font:800 1.4rem/1 var(--sx-titre);color:var(--sx-prune);letter-spacing:-.035em}
.badge-photo span{display:block;font-size:11.8px;color:var(--sx-ardoise);margin-top:5px;font-weight:600}

/* Trois photos imbriquees : la grande porte le sujet, les petites le
   quotidien de l'association. */
.mosaique{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:14px;
  aspect-ratio:1/0.92;position:relative}
.mosaique figure{border-radius:20px;overflow:hidden;position:relative;background:var(--sx-sable)}
.mosaique figure:first-child{grid-row:1/3}
.mosaique img{width:100%;height:100%;object-fit:cover}
.mosaique .badge-photo{left:14px;bottom:14px}

.faits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:28px}
.fait{background:#fff;border:1px solid var(--sx-trait);border-radius:16px;padding:16px 18px}
.sec-creme .fait,.sec-sable .fait{border-color:transparent}
.fait b{display:block;font:800 1.5rem/1.05 var(--sx-titre);letter-spacing:-.035em;color:var(--sx-encre)}
.fait span{display:block;font-size:12.8px;color:var(--sx-ardoise);margin-top:5px;line-height:1.45}
.fait.prune b{color:var(--sx-prune)}
.fait.feuille b{color:var(--sx-feuille)}

/* ═══ CITATION ═════════════════════════════════════════════════════════ */
.citation{max-width:62ch;margin:0 auto;text-align:center}
.citation .guillemet{display:block;font:800 4.4rem/0.6 var(--sx-titre);color:var(--sx-feuille-vif);
  margin-bottom:14px}
.citation blockquote{font-family:var(--sx-titre);font-weight:600;font-size:clamp(1.3rem,1rem + 1.1vw,1.85rem);
  line-height:1.4;letter-spacing:-.025em;color:var(--sx-encre)}
.citation figcaption{margin-top:18px;font-size:13.4px;color:var(--sx-ardoise);font-weight:600}

/* ═══ BANDE D'ENGAGEMENTS (sombre, photo en filigrane) ═════════════════ */
.bande-preuve{background:var(--sx-encre);color:#fff;padding:clamp(60px,7vw,80px) 0;position:relative;overflow:hidden}
.preuve-fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.16}
.bande-preuve::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(23,21,47,.96),rgba(40,20,56,.84))}
.bande-preuve .large{position:relative;z-index:2}
.bande-preuve .sec-tete h2{color:#fff}
.preuve-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.preuve-c .ico{margin-bottom:16px}
.preuve-c b{display:block;font:800 clamp(1.7rem,1.3rem + 1.4vw,2.35rem)/1 var(--sx-titre);letter-spacing:-.04em;color:#fff}
.preuve-c strong{display:block;margin-top:10px;font:600 15px/1.35 var(--sx-titre);color:#fff}
.preuve-c > span:not(.ico){display:block;margin-top:6px;font-size:13.4px;color:rgba(255,255,255,.78);line-height:1.55}

/* ═══ LES TROIS REGIONS ════════════════════════════════════════════════ */
.regions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.region{background:#fff;border:1px solid var(--sx-trait);border-radius:20px;padding:28px;text-align:center;
  position:relative;overflow:hidden;transition:transform .3s var(--sx-souple), box-shadow .3s}
.region:hover{transform:translateY(-4px);box-shadow:0 24px 46px -28px rgba(23,21,47,.3)}
.region::before{content:'';position:absolute;inset:0 0 auto;height:4px;background:var(--sx-prune)}
.region.forte::before{background:var(--sx-soleil)}
.region h3{font-size:1.04rem;margin-bottom:12px}
.region .taux{font:800 clamp(2.6rem,2rem + 2.2vw,3.5rem)/1 var(--sx-titre);letter-spacing:-.045em;color:var(--sx-prune)}
.region.forte .taux{color:var(--sx-soleil-t)}
.region .taux small{font-size:.42em;font-weight:700;letter-spacing:0;margin-left:2px}
.region .libelle{display:block;margin-top:8px;font-size:12.4px;color:var(--sx-ardoise);font-weight:600}
.region p{font-size:13.8px;color:var(--sx-ardoise);margin-top:15px;padding-top:15px;border-top:1px solid var(--sx-trait)}
/* Une prime n'est jamais acquise : cette mention n'est pas une clause de
   style, c'est ce qui evite la promesse qu'on ne peut pas tenir. */
.region .reserve{display:block;margin-top:10px;font-size:11.6px;color:var(--sx-ardoise);font-style:italic}
.reserve-txt{font-size:13.2px;color:var(--sx-ardoise);margin-top:22px;max-width:80ch}

/* La proportion, sans aucun montant : on ne peut pas chiffrer un projet
   avant le formulaire. On montre donc la PART prise en charge. */
.part{background:#fff;border:1px solid var(--sx-trait);border-radius:20px;padding:28px}
.part-t{font:700 12px/1.3 var(--sx-titre);text-transform:uppercase;letter-spacing:1.2px;color:var(--sx-ardoise);margin-bottom:20px}
.barre{display:flex;height:46px;border-radius:12px;overflow:hidden}
.barre + .barre{margin-top:10px}
.barre-p{display:grid;place-items:center;font:700 13.5px/1 var(--sx-titre);color:#fff;min-width:0;padding:0 6px;white-space:nowrap}
.barre-p.prise{background:var(--sx-soleil-t)}
.barre-p.reste{background:var(--sx-graphite)}
.part-leg{display:flex;gap:18px;margin-top:16px;flex-wrap:wrap;font-size:13px;color:var(--sx-ardoise)}
.part-leg span{display:inline-flex;align-items:center;gap:7px}
.part-leg i{width:10px;height:10px;border-radius:3px;display:inline-block}
.part-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--sx-trait);font-size:13px;color:var(--sx-ardoise)}

/* Ce que contient le devis (sans montants) */
.devis{background:#fff;border:1px solid var(--sx-trait);border-radius:20px;overflow:hidden;
  box-shadow:0 30px 60px -40px rgba(23,21,47,.45)}
.devis-tete{padding:17px 24px;border-bottom:1px solid var(--sx-trait);background:var(--sx-creme);
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.devis-tete b{font:700 12px/1 var(--sx-titre);text-transform:uppercase;letter-spacing:1.2px;color:var(--sx-ardoise)}
.devis-corps{padding:8px 24px 18px}
.devis-l{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-bottom:1px solid var(--sx-trait);
  font-size:14.4px;color:var(--sx-graphite)}
.devis-l:last-child{border-bottom:0}
.devis-l .ico-nu{color:var(--sx-feuille);flex-shrink:0;margin-top:2px}
.devis-l.ae{color:var(--sx-encre);font-weight:600}
.devis-l.ae .ico-nu{color:var(--sx-prune)}
.devis-pied{display:flex;align-items:center;gap:14px;padding:16px 24px;border-top:1px solid #D5EBCB;
  background:var(--sx-feuille-v)}
.devis-pied img{height:56px;width:auto;flex-shrink:0}
.devis-pied small{font-size:12.4px;color:var(--sx-graphite);line-height:1.5}

/* ═══ SIMULATEUR ═══════════════════════════════════════════════════════ */
.panneau{background:var(--sx-encre);color:#fff;border-radius:26px;padding:clamp(28px,4.5vw,52px);
  display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center;position:relative;overflow:hidden}
.panneau::after{content:'';position:absolute;right:-90px;bottom:-120px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle, rgba(224,138,44,.22), transparent 70%);pointer-events:none}
.panneau > *{position:relative;z-index:1}
.panneau h2{color:#fff;margin:14px 0 0}
.panneau p{color:rgba(255,255,255,.84);margin-top:16px}
.simu{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:26px}
.simu label{display:block;font:700 11.5px/1.2 var(--sx-titre);text-transform:uppercase;letter-spacing:1.1px;
  color:rgba(255,255,255,.82);margin-bottom:8px}
.simu select{width:100%;padding:13px 14px;border-radius:11px;border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.1);color:#fff;font:600 14.5px var(--sx-texte);margin-bottom:18px}
.simu select option{background:var(--sx-encre);color:#fff}
.simu-res{border-top:1px solid rgba(255,255,255,.2);padding-top:18px;display:flex;justify-content:space-between;
  align-items:baseline;gap:12px}
.simu-res span{font-size:13.6px;color:rgba(255,255,255,.86)}
.simu-res b{font:800 2rem/1 var(--sx-titre);color:var(--sx-soleil);letter-spacing:-.035em}
.simu-plus{margin-top:14px;font-size:12.8px;color:rgba(255,255,255,.74)}

/* ═══ CHRONOLOGIE ══════════════════════════════════════════════════════ */
.chrono{position:relative;padding-left:36px;max-width:760px}
.chrono::before{content:'';position:absolute;left:9px;top:10px;bottom:10px;width:2px;background:var(--sx-trait-f);border-radius:2px}
.chrono-e{position:relative;padding-bottom:28px}
.chrono-e:last-child{padding-bottom:0}
.chrono-e::before{content:'';position:absolute;left:-32px;top:6px;width:14px;height:14px;border-radius:50%;
  background:#fff;border:2.5px solid var(--sx-prune)}
.chrono-e.ae::before{border-color:var(--sx-feuille);background:var(--sx-feuille-v)}
.chrono-e time{font:600 12.4px/1.4 var(--sx-mono);color:var(--sx-prune)}
.chrono-e.ae time{color:var(--sx-feuille)}
.chrono-e h4{margin:4px 0 6px}
.chrono-e p{font-size:14.6px;color:var(--sx-ardoise)}

/* ═══ DEUX ENTITES ═════════════════════════════════════════════════════ */
.entites{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:22px;align-items:stretch}
.entites-lien{display:grid;place-items:center;align-content:center;gap:8px;text-align:center;
  font:700 12px/1.35 var(--sx-titre);color:var(--sx-feuille);max-width:140px;text-transform:uppercase;letter-spacing:.6px}
.entites-lien .ico{width:52px;height:52px;border-radius:50%}
.entite-logo{height:84px;width:auto;margin-bottom:6px}
.entite-logo.rond{width:72px;height:72px;border-radius:50%}

/* ═══ QUESTIONS ════════════════════════════════════════════════════════ */
.faq{border-top:1px solid var(--sx-trait)}
.faq-item{border-bottom:1px solid var(--sx-trait)}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:22px 44px 22px 0;
  font:600 1.02rem/1.4 var(--sx-titre);color:var(--sx-encre);position:relative;letter-spacing:-.018em}
.faq-q::after{content:'';position:absolute;right:12px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--sx-prune);border-bottom:2px solid var(--sx-prune);
  transform:translateY(-70%) rotate(45deg);transition:transform .32s var(--sx-souple)}
.faq-item.ouvert .faq-q::after{transform:translateY(-30%) rotate(-135deg)}
.faq-r{max-height:0;overflow:hidden;transition:max-height .45s var(--sx-souple)}
.faq-r p{padding:0 0 22px;color:var(--sx-ardoise);font-size:15px;max-width:72ch}
html:not(.js) .faq-r{max-height:none}

/* ═══ APPEL FINAL (photo) ══════════════════════════════════════════════ */
.cta-final{position:relative;overflow:hidden;background:var(--sx-encre);color:#fff;text-align:center;
  padding:clamp(80px,9vw,120px) 0 clamp(110px,11vw,150px)}
.cta-final img.fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.cta-final::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(23,21,47,.86), rgba(58,22,70,.82))}
.cta-final .etroit{position:relative;z-index:1}
.cta-final h2{color:#fff;margin:14px 0 18px}
.cta-final p{max-width:58ch;margin:0 auto 32px;color:rgba(255,255,255,.88);font-size:1.06rem}
.cta-final .hero-actions{justify-content:center;margin-top:0}

/* ═══ FORMULAIRE DE CONTACT ════════════════════════════════════════════ */
.deux-col{display:grid;grid-template-columns:minmax(0,1.34fr) minmax(0,.66fr);gap:clamp(28px,4vw,44px);align-items:start}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.champ{margin-bottom:17px}
.champ label{display:block;font-size:13px;font-weight:700;margin-bottom:7px;color:var(--sx-graphite)}
.champ label .req{color:var(--sx-prune)}
.champ .aide{display:block;font-size:12.2px;font-weight:400;color:var(--sx-ardoise);margin:-3px 0 7px}
.champ input,.champ select,.champ textarea{width:100%;padding:13px 15px;border-radius:12px;
  border:1.5px solid var(--sx-trait-f);font:400 15px var(--sx-texte);background:#fff;color:var(--sx-encre);
  transition:border-color .2s, box-shadow .2s}
.champ textarea{resize:vertical;min-height:130px}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--sx-prune);
  box-shadow:0 0 0 4px rgba(var(--sx-prune-rgb),.14)}
.case{display:flex;gap:11px;align-items:flex-start;font-size:13.4px;color:var(--sx-ardoise);margin:4px 0 18px;cursor:pointer}
.case input{width:18px;height:18px;margin-top:2px;accent-color:var(--sx-prune);flex-shrink:0}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-retour{display:none;margin-top:16px;padding:14px 16px;border-radius:12px;font-size:14px;line-height:1.5}
.form-retour.ok{display:block;background:var(--sx-feuille-v);color:var(--sx-feuille);border:1px solid #CFE6C4}
.form-retour.ko{display:block;background:#FDECEC;color:#A4262C;border:1px solid #F4C7C9}
.choix-rapide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:26px}
.choix-rapide a{display:flex;gap:14px;align-items:center;text-decoration:none;color:inherit;
  background:#fff;border:1.5px solid var(--sx-trait-f);border-radius:16px;padding:16px 18px;
  transition:border-color .2s, transform .2s var(--sx-souple)}
.choix-rapide a:hover{border-color:var(--sx-prune);transform:translateY(-2px)}
.choix-rapide b{display:block;font:600 15px/1.3 var(--sx-titre);letter-spacing:-.015em}
.choix-rapide a > span:last-child > span{display:block;font-size:12.8px;color:var(--sx-ardoise);margin-top:2px}
.choix-rapide a > span:last-child{min-width:0;display:block}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════ */
@media (max-width:1020px){
  .hero-grille{grid-template-columns:minmax(0,1fr)}
  .carte-ae{max-width:460px}
  .duo-photo,.panneau,.deux-col,.hero-duo{grid-template-columns:minmax(0,1fr)}
  .duo-photo.inverse > :first-child{order:0}
  .cartes-3,.cartes-4,.preuve-grille,.regions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cercle{grid-template-columns:minmax(0,1fr)}
  .cercle-e:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-17px;transform:translateX(-50%) rotate(135deg)}
  .entites{grid-template-columns:minmax(0,1fr)}
  .entites-lien{max-width:none;grid-auto-flow:column;justify-content:center}
  .hero{min-height:0}
}
@media (max-width:680px){
  body{font-size:16px}
  .cartes,.cartes-3,.cartes-4,.preuve-grille,.regions,.duo,.choix-rapide{grid-template-columns:minmax(0,1fr)}
  .carte-corps,.carte-nue{padding:22px}
  .hero-chiffres{gap:20px 26px}
  .hero-chiffres > div{flex:1 1 40%}
  .faits{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mosaique{aspect-ratio:auto;grid-template-rows:220px 150px}
  .mosaique figure:first-child{grid-row:auto;grid-column:1/3}
  .hero-actions .btn{flex:1 1 100%}
}

/* ═══ ICONES ANIMEES ══════════════════════════════════════════════════
   Le trait se dessine a l'apparition (pathLength=1 sur chaque forme),
   l'icone se souleve au survol de sa carte. Rien de tout cela si le
   visiteur a demande moins de mouvement (regle generale plus haut). */
.ico svg [pathLength]{stroke-dasharray:1;stroke-dashoffset:0}
/* Visibles par defaut. Le dessin du trait est lance par site.js : si le
   script ou l'animation echoue, l'icone reste simplement affichee. */
.ico{transition:transform .45s var(--sx-souple), box-shadow .3s}
.ico svg{transition:transform .45s var(--sx-souple)}
.carte:hover .ico,.cercle-e:hover .ico,.preuve-c:hover .ico,.choix-rapide a:hover .ico,.ec-f:hover .ico,
.facteur:hover .ico{transform:translateY(-3px) rotate(-6deg);box-shadow:0 12px 22px -12px rgba(23,21,47,.45)}
.carte:hover .ico svg,.cercle-e:hover .ico svg,.preuve-c:hover .ico svg,.ec-f:hover .ico svg,.facteur:hover .ico svg{transform:scale(1.12)}
.ico-flotte{animation:sx-flotte 4.5s ease-in-out infinite}
@keyframes sx-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ═══ ESPACE CLIENT (presentation) ═════════════════════════════════════ */
.ec-grille{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(36px,5vw,64px);align-items:center}
.ec-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}
.ec-f{display:flex;gap:13px;align-items:flex-start;background:#fff;border:1px solid var(--sx-trait);border-radius:16px;padding:14px 16px}
.ec-f .ico{width:42px;height:42px;border-radius:12px}
.ec-f .ico svg{width:20px;height:20px}
.ec-f > div{min-width:0}
.ec-f b{display:block;font:600 14.6px/1.3 var(--sx-titre);letter-spacing:-.01em}
.ec-f p{font-size:13px;color:var(--sx-ardoise);line-height:1.5;margin-top:3px}
.ec-ecran{background:#fff;border-radius:22px;border:1px solid var(--sx-trait);overflow:hidden;
  box-shadow:0 50px 90px -46px rgba(23,21,47,.6);transform:perspective(1600px) rotateY(-7deg) rotateX(2deg);
  transition:transform .8s var(--sx-souple)}
.ec-ecran:hover{transform:perspective(1600px) rotateY(0) rotateX(0)}
.ec-barre{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--sx-trait);background:#fff}
.ec-barre i{width:10px;height:10px;border-radius:50%;background:#E8DFD5}
.ec-barre span{margin-left:10px;flex:1;font:500 11.5px/1 var(--sx-mono);color:var(--sx-ardoise);background:var(--sx-creme);
  padding:7px 12px;border-radius:8px}
.ec-app{padding:16px;display:grid;gap:12px;background:var(--sx-creme)}
.ec-salut{border-radius:16px;padding:16px 18px;color:#fff;background:linear-gradient(120deg,#17152F,#4A1850 60%,#7A1F7E);
  display:flex;justify-content:space-between;gap:12px;align-items:center}
.ec-salut b{display:block;font:700 15.5px/1.2 var(--sx-titre)}
.ec-salut span{display:block;font-size:11.5px;opacity:.8;margin-top:4px}
.ec-salut em{font-style:normal;font:700 11px/1 var(--sx-titre);background:rgba(255,255,255,.14);padding:7px 10px;border-radius:99px;white-space:nowrap}
.ec-salut em::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#5FB53A;margin-right:6px}
.ec-cartes{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:12px}
.ec-c{background:#fff;border:1px solid var(--sx-trait);border-radius:14px;padding:13px 14px;min-width:0}
.ec-c.grand{grid-row:span 2;background:linear-gradient(160deg,var(--sx-prune-v),#fff 70%)}
.ec-c small{display:block;font:700 9.5px/1.2 var(--sx-titre);letter-spacing:.9px;text-transform:uppercase;color:var(--sx-ardoise)}
.ec-c b{display:block;font:800 1.25rem/1.1 var(--sx-titre);letter-spacing:-.03em;margin-top:6px;color:var(--sx-encre)}
.ec-c p{font-size:11.5px;color:var(--sx-ardoise);margin-top:3px;line-height:1.4}
.ec-barres{display:flex;align-items:flex-end;gap:4px;height:84px;margin-top:14px}
.ec-barres i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#A445A6,#7A1F7E);transform-origin:bottom}
.rev.vu .ec-barres i{animation:ec-monte 1.1s var(--sx-souple) both}
.ec-barres i:nth-child(2n){animation-delay:.08s}.ec-barres i:nth-child(3n){animation-delay:.16s}
@keyframes ec-monte{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.ec-pastille{display:inline-flex;margin-top:8px;font:700 10.5px/1 var(--sx-titre);padding:5px 9px;border-radius:99px;
  background:var(--sx-soleil-v);color:var(--sx-soleil-t)}
.ec-pastille.ok{background:var(--sx-feuille-v);color:var(--sx-feuille)}
.ec-c.ae{grid-column:1/-1;display:flex;gap:12px;align-items:center;background:var(--sx-feuille-v);border-color:#D5EBCB}
.ec-c.ae img{height:50px;width:auto;flex-shrink:0}
.ec-c.ae b{font-size:.95rem;margin:0}
.ec-legende{font-size:11.5px;color:var(--sx-ardoise);text-align:center;margin-top:14px}

/* ═══ PRIMES — hero, simulateur, scenarios, facteurs ═══════════════════ */
.taux-geant{background:#fff;border-radius:26px;padding:30px;border:1px solid var(--sx-trait);
  box-shadow:0 40px 80px -46px rgba(23,21,47,.5);position:relative;overflow:hidden}
.taux-geant::after{content:'';position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(224,138,44,.22),transparent 70%)}
.taux-geant > *{position:relative;z-index:1}
.taux-geant small{display:block;font:700 11.5px/1.3 var(--sx-titre);letter-spacing:1.2px;text-transform:uppercase;color:var(--sx-ardoise)}
.taux-geant .chiffre{font:800 clamp(4.2rem,3rem + 5vw,6.4rem)/.95 var(--sx-titre);letter-spacing:-.06em;color:var(--sx-soleil-t);margin:10px 0 6px}
.taux-geant p{font-size:14.6px;color:var(--sx-ardoise)}
.taux-regions{display:grid;gap:8px;margin-top:18px;padding-top:18px;border-top:1px solid var(--sx-trait)}
.taux-regions span{display:flex;align-items:center;gap:10px;font:600 14.4px/1.3 var(--sx-titre);color:var(--sx-encre)}
.taux-regions .ico-nu{color:var(--sx-feuille)}
.taux-regions em{margin-left:auto;font-style:normal;font:700 12px/1 var(--sx-titre);color:var(--sx-soleil-t);background:var(--sx-soleil-v);
  padding:5px 9px;border-radius:99px}

.simu2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:28px;overflow:hidden;
  background:var(--sx-encre);color:#fff;box-shadow:0 50px 100px -50px rgba(23,21,47,.8)}
.simu2-entrees,.simu2-sorties{padding:clamp(24px,4vw,44px)}
.simu2-sorties{background:linear-gradient(160deg,#261736 0%,#3D1A48 55%,#5E1D63 100%);position:relative;overflow:hidden}
.simu2-sorties::after{content:'';position:absolute;right:-90px;bottom:-110px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(95,181,58,.2),transparent 70%)}
.simu2-sorties > *{position:relative;z-index:1}
.simu2 h2{color:#fff;font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);margin:12px 0 22px}
.simu2-champ{margin-bottom:26px}
.simu2-champ label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font:700 11.5px/1.3 var(--sx-titre);letter-spacing:1.1px;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:12px}
.simu2-champ label output{font:800 1.5rem/1 var(--sx-titre);letter-spacing:-.03em;text-transform:none;color:#fff}
.curseur{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;outline:none;cursor:pointer;margin:0;
  background:linear-gradient(90deg,var(--sx-soleil) var(--p,50%),rgba(255,255,255,.18) var(--p,50%))}
.curseur::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;
  border:5px solid var(--sx-soleil);box-shadow:0 6px 16px -4px rgba(0,0,0,.6);transition:transform .2s}
.curseur::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:5px solid var(--sx-soleil)}
.curseur:active::-webkit-slider-thumb{transform:scale(1.15)}
.curseur:focus-visible{outline:2px solid #fff;outline-offset:6px}
.curseur-bornes{display:flex;justify-content:space-between;font-size:11.5px;color:rgba(255,255,255,.6);margin-top:8px}
.puces{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.puces button{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;
  font:600 12.5px/1 var(--sx-titre);padding:9px 13px;border-radius:99px;transition:background .2s,border-color .2s,color .2s}
.puces button:hover{border-color:#fff}
.puces button[aria-pressed="true"]{background:#fff;color:var(--sx-encre);border-color:#fff}
.simu2-note{font-size:12.4px;color:rgba(255,255,255,.72);line-height:1.6}
.simu2-res{display:grid;gap:14px}
.simu2-ligne{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.14)}
.simu2-ligne span{font-size:14px;color:rgba(255,255,255,.84)}
.simu2-ligne b{font:800 1.35rem/1 var(--sx-titre);letter-spacing:-.03em;white-space:nowrap}
.simu2-ligne.prime b{color:var(--sx-soleil);font-size:2.1rem}
.simu2-ligne.votre-part b{color:#fff;font-size:1.7rem}
.barre2{display:flex;height:16px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.14);margin:6px 0 4px}
.barre2 i{display:block;height:100%;transition:width .5s var(--sx-souple)}
.barre2 .b-prime{background:linear-gradient(90deg,#E08A2C,#F2B25C)}
.barre2 .b-part{background:rgba(255,255,255,.55)}
.simu2-phrase{font-size:14.6px;color:rgba(255,255,255,.9);line-height:1.65;margin-top:6px}
.simu2-phrase strong{color:#fff}
.simu2-ae{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:12px 14px;border-radius:14px;
  background:rgba(95,181,58,.14);border:1px solid rgba(95,181,58,.32);font-size:12.8px;color:rgba(255,255,255,.88);line-height:1.5}
.simu2-ae svg{width:18px;height:18px;color:var(--sx-feuille-vif);flex-shrink:0;margin-top:1px}

.scenarios{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--sx-trait);
  border-radius:20px;overflow:hidden;font-size:14.4px}
.scenarios th,.scenarios td{padding:15px 18px;text-align:right;border-bottom:1px solid var(--sx-trait);white-space:nowrap}
.scenarios th:first-child,.scenarios td:first-child{text-align:left;white-space:normal}
.scenarios thead th{background:var(--sx-creme);font:700 11px/1.3 var(--sx-titre);letter-spacing:.9px;text-transform:uppercase;color:var(--sx-ardoise)}
.scenarios thead th.max{color:var(--sx-soleil-t)}
.scenarios tbody tr:last-child td{border-bottom:0}
.scenarios td b{font:700 14.6px var(--sx-titre)}
.scenarios td span{display:block;font-size:12px;color:var(--sx-ardoise)}
.scenarios td.max{background:var(--sx-soleil-v);color:var(--sx-soleil-t);font:800 15.5px var(--sx-titre)}
.scenarios-bloc{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:20px}
.scenarios-bloc .scenarios{min-width:560px}

.facteurs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.facteur{background:#fff;border:1px solid var(--sx-trait);border-radius:20px;padding:24px;transition:transform .3s var(--sx-souple),box-shadow .3s}
.facteur:hover{transform:translateY(-4px);box-shadow:0 24px 46px -28px rgba(23,21,47,.3)}
.facteur h3{margin:16px 0 8px;font-size:1.08rem}
.facteur p{font-size:14.2px;color:var(--sx-ardoise)}
.facteur .effet{display:inline-flex;margin-top:14px;font:700 11.5px/1 var(--sx-titre);padding:6px 10px;border-radius:99px;
  background:var(--sx-soleil-v);color:var(--sx-soleil-t)}
.facteur .effet.bas{background:#FDECEC;color:#A4262C}

/* ═══ PAGES LEGALES ════════════════════════════════════════════════════ */
.legal-tete .meta{display:flex;gap:10px 22px;flex-wrap:wrap;margin-top:22px;font-size:13px;color:var(--sx-ardoise)}
.legal-tete .meta span{display:inline-flex;align-items:center;gap:8px}
.legal-tete .meta b{color:var(--sx-encre)}
.legal-grille{display:grid;grid-template-columns:270px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.legal-somm{position:sticky;top:calc(var(--fx-nav-h,74px) + 20px);background:#fff;border:1px solid var(--sx-trait);
  border-radius:18px;padding:18px;max-height:calc(100vh - var(--fx-nav-h,74px) - 40px);overflow-y:auto}
.legal-somm h2{font:700 11px/1.3 var(--sx-titre);letter-spacing:1.2px;text-transform:uppercase;color:var(--sx-ardoise);margin:0 0 10px}
.legal-somm ol{list-style:none;counter-reset:somm;display:grid;gap:2px}
.legal-somm li{counter-increment:somm}
.legal-somm ol a{display:flex;gap:10px;text-decoration:none;font-size:13.6px;line-height:1.4;color:var(--sx-graphite);
  padding:7px 9px;border-radius:9px;transition:background .2s,color .2s}
.legal-somm ol a::before{content:counter(somm,decimal-leading-zero);font:600 11.5px/1.6 var(--sx-mono);color:var(--sx-ardoise)}
.legal-somm ol a:hover{background:var(--sx-creme)}
.legal-somm a.ici{background:var(--sx-prune-v);color:var(--sx-prune);font-weight:600}
.legal-somm a.ici::before{color:var(--sx-prune)}
.legal-outils{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--sx-trait)}
.legal-outils a,.legal-outils button{font:600 12.5px/1 var(--sx-titre);color:var(--sx-graphite);background:var(--sx-creme);
  border:1px solid var(--sx-trait);border-radius:99px;padding:8px 12px;cursor:pointer;text-decoration:none}
.legal-outils a:hover,.legal-outils button:hover{border-color:var(--sx-prune);color:var(--sx-prune)}
.legal-corps{min-width:0}
.legal-bref{background:var(--sx-feuille-v);border:1px solid #D5EBCB;border-radius:20px;padding:22px 24px;margin-bottom:34px}
.legal-bref h2{font-size:1.05rem;margin:0 0 12px;display:flex;align-items:center;gap:10px}
.legal-bref h2 .ico{width:36px;height:36px;border-radius:11px;background:#fff}
.legal-bref h2 .ico svg{width:18px;height:18px}
.legal-bref ul{list-style:none;display:grid;gap:8px}
.legal-bref li{display:flex;gap:10px;font-size:14.6px;color:var(--sx-graphite);line-height:1.55}
.legal-bref li .ico-nu{color:var(--sx-feuille);flex-shrink:0;margin-top:2px}
.legal-note{background:var(--sx-soleil-v);border:1px solid #F2D9B8;border-radius:16px;padding:14px 18px;margin-bottom:28px;
  font-size:13.6px;color:#5C3A04;line-height:1.6}
.legal-art{padding:30px 0;border-top:1px solid var(--sx-trait);scroll-margin-top:calc(var(--fx-nav-h,74px) + 20px)}
.legal-art:first-of-type{border-top:0;padding-top:0}
.legal-art > h2{display:flex;align-items:baseline;gap:14px;font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);margin-bottom:16px}
.legal-art > h2 .num{font:600 .8rem/1 var(--sx-mono);color:var(--sx-prune);background:var(--sx-prune-v);padding:6px 9px;border-radius:8px;
  flex-shrink:0;transform:translateY(-3px)}
.legal-art h3{font-size:1rem;margin:22px 0 8px}
.legal-art p,.legal-art li{font-size:15.2px;line-height:1.78;color:var(--sx-graphite)}
.legal-art p + p{margin-top:12px}
.legal-art ul,.legal-art ol{margin:10px 0 10px 1.2em;display:grid;gap:6px}
.legal-art a{color:var(--sx-prune);font-weight:600}
.legal-art strong{color:var(--sx-encre)}
.legal-art .note,.legal-art .cgv-note{background:var(--sx-creme);border-left:3px solid var(--sx-prune);border-radius:0 12px 12px 0;
  padding:12px 16px;margin:14px 0}
.legal-id{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);background:#fff;border:1px solid var(--sx-trait);
  border-radius:16px;overflow:hidden;margin:6px 0}
.legal-id dt,.legal-id dd{padding:12px 16px;border-bottom:1px solid var(--sx-trait);font-size:14.4px}
.legal-id dt{background:var(--sx-creme);font-weight:600;color:var(--sx-ardoise)}
.legal-id dd{color:var(--sx-encre);min-width:0;overflow-wrap:anywhere}
.legal-id dt:last-of-type,.legal-id dd:last-of-type{border-bottom:0}
.legal-tab{width:100%;border-collapse:collapse;font-size:13.8px;margin:10px 0;background:#fff}
.legal-tab th,.legal-tab td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--sx-trait);vertical-align:top}
.legal-tab th{background:var(--sx-creme);font:700 11px/1.3 var(--sx-titre);letter-spacing:.7px;text-transform:uppercase;color:var(--sx-ardoise)}
.legal-tab tr:last-child td{border-bottom:0}
.legal-tab-bloc{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--sx-trait);border-radius:14px;margin:12px 0}
.legal-tab-bloc .legal-tab{min-width:620px;margin:0}
.choix-cookies{display:grid;gap:10px;margin:14px 0}
.choix-cookies label{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;border:1px solid var(--sx-trait);
  border-radius:14px;padding:14px 16px;cursor:pointer}
.choix-cookies label b{display:block;font:600 14.6px var(--sx-titre)}
.choix-cookies label > span > span{display:block;font-size:13px;color:var(--sx-ardoise);margin-top:2px}
.choix-cookies input{width:22px;height:22px;flex-shrink:0;accent-color:var(--sx-prune)}
@media print{
  .sx-bandeau,.sx-tete,.sx-tiroir,.sx-pied,.sx-wa,.legal-somm,.cta-final,.skip-link{display:none !important}
  .legal-grille{grid-template-columns:1fr}
  .hero-court{padding:0 0 20px;background:#fff}
  body{font-size:11pt}
}
@media (max-width:1020px){
  .ec-grille,.simu2,.legal-grille{grid-template-columns:minmax(0,1fr)}
  .ec-ecran{transform:none}
  .facteurs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .legal-somm{position:static;max-height:none}
}
@media (max-width:680px){
  .ec-liste,.facteurs{grid-template-columns:minmax(0,1fr)}
  .legal-id{grid-template-columns:minmax(0,1fr)}
  .legal-id dt{border-bottom:0;padding-bottom:4px}
  .legal-id dd{padding-top:0}
  .ec-cartes{grid-template-columns:minmax(0,1fr)}
  .ec-c.grand{grid-row:auto}
}

/* Filet de securite : l'icone est un <span>. Une regle trop large du type
   « .bloc span{display:block} » la decentrait (c'est arrive deux fois).
   Double classe = specificite suffisante pour gagner sans !important. */
.ico.ico{display:inline-grid;place-items:center;margin-top:0}

/* ═══ SIMULATEUR — version 2 ═══════════════════════════════════════════ */
.simu2-etiq{display:flex;align-items:center;gap:10px;margin-bottom:12px;
  font:700 12px/1.3 var(--sx-titre);letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.86)}
.simu2-etiq output{margin-left:auto;font:800 1.5rem/1 var(--sx-titre);letter-spacing:-.03em;text-transform:none;color:#fff}
.simu2-num{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:var(--sx-soleil);color:var(--sx-encre);font:800 12px/1 var(--sx-titre);letter-spacing:0}
.simu2-saisie{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.22);
  border-radius:14px;padding:6px 16px;margin-bottom:14px;transition:border-color .2s,background .2s}
.simu2-saisie:focus-within{border-color:var(--sx-soleil);background:rgba(255,255,255,.12)}
.simu2-saisie input{flex:1;min-width:0;background:none;border:0;outline:none;color:#fff;
  font:800 2rem/1.3 var(--sx-titre);letter-spacing:-.03em}
.simu2-saisie span{font:700 1.4rem/1 var(--sx-titre);color:rgba(255,255,255,.6)}
.simu2-bascule{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:14.6px;color:rgba(255,255,255,.9)}
.simu2-bascule input{position:absolute;opacity:0;width:1px;height:1px}
.simu2-bascule i{width:46px;height:26px;border-radius:99px;background:rgba(255,255,255,.2);position:relative;flex-shrink:0;transition:background .25s}
.simu2-bascule i::after{content:'';position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  transition:transform .25s var(--sx-souple)}
.simu2-bascule input:checked + i{background:var(--sx-feuille-vif)}
.simu2-bascule input:checked + i::after{transform:translateX(20px)}
.simu2-bascule input:focus-visible + i{outline:2px solid #fff;outline-offset:3px}

.simu2-haut{display:flex;align-items:center;gap:26px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.14)}
.anneau{position:relative;width:148px;height:148px;flex-shrink:0}
.anneau svg{width:100%;height:100%;transform:rotate(-90deg)}
.anneau circle{fill:none;stroke-width:12}
.anneau-fond{stroke:rgba(255,255,255,.14)}
.anneau-prime{stroke:var(--sx-soleil);stroke-linecap:round;transition:stroke-dasharray .6s var(--sx-souple)}
.anneau-txt{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.anneau-txt b{font:800 1.9rem/1 var(--sx-titre);letter-spacing:-.04em;color:#fff}
.anneau-txt span{font-size:11.5px;color:rgba(255,255,255,.7);margin-top:4px}
.simu2-grands{display:grid;gap:14px;min-width:0}
.simu2-grands span{display:block;font-size:12.5px;color:rgba(255,255,255,.75);font-weight:600}
.simu2-grands b{display:block;font:800 1.9rem/1.1 var(--sx-titre);letter-spacing:-.035em;color:#fff;white-space:nowrap}
.simu2-grands b.prime{color:var(--sx-soleil);font-size:2.3rem}

.flux{list-style:none;display:grid;gap:10px;margin:20px 0 4px;padding:0}
.flux li{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:11px 14px}
.flux li[hidden]{display:none}
.flux-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:rgba(255,255,255,.14);font:700 12px/1 var(--sx-titre);color:#fff}
.flux li > div{flex:1;min-width:0}
.flux b{display:block;font:600 14px/1.3 var(--sx-titre);color:#fff}
.flux small{display:block;font-size:11.8px;color:rgba(255,255,255,.65);margin-top:2px}
.flux em{font-style:normal;font:800 1.05rem/1 var(--sx-titre);color:#fff;white-space:nowrap}
.flux em.plus{color:var(--sx-feuille-vif)}
@media (max-width:680px){
  .simu2-haut{flex-direction:column;align-items:flex-start}
  .anneau{width:128px;height:128px}
}
/* L'ancienne regle « .simu2-champ label » (etiquette en capitales) ne doit
   toucher ni l'etiquette numerotee ni l'interrupteur TVA. */
.simu2-champ .simu2-etiq label{display:inline;margin:0;font:inherit;letter-spacing:inherit;color:inherit}
.simu2-champ .simu2-bascule{justify-content:flex-start;margin:0;text-transform:none;letter-spacing:0;
  font:400 14.6px/1.4 var(--sx-texte);color:rgba(255,255,255,.9)}

/* Modes de connexion a l'espace client : code, Google, Microsoft. */
.ec-connexion{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.ec-connexion span{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--sx-trait-f);
  border-radius:99px;padding:8px 14px;font:600 13.4px/1 var(--sx-titre);color:var(--sx-encre)}
.ec-connexion svg{width:16px;height:16px;flex-shrink:0;display:block}
.ec-connexion span:first-child svg{color:var(--sx-prune)}

/* ═══ ACTIONS SOUTENUES — mosaique ═════════════════════════════════════ */
.actions-mosaique{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;gap:18px}
.act{position:relative;border-radius:24px;overflow:hidden;background:#fff;border:1px solid var(--sx-trait);
  transition:transform .35s var(--sx-souple), box-shadow .35s}
.act:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(23,21,47,.5)}
.act > img,.act-campagne-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--sx-souple)}
.act:hover > img,.act:hover .act-campagne-img img{transform:scale(1.05)}
.act-voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,21,47,0) 25%,rgba(23,21,47,.55) 55%,rgba(23,21,47,.92) 100%)}
.act-txt{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:26px;color:#fff}
.act-txt h3{color:#fff;margin:12px 0 8px}
.act-txt p{font-size:14.4px;color:rgba(255,255,255,.88);line-height:1.6}
.act-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.95);color:var(--sx-prune);
  font:700 11px/1 var(--sx-titre);letter-spacing:.6px;text-transform:uppercase;padding:7px 11px;border-radius:99px}
.act-tag svg{width:13px;height:13px}
.act-tag-vert{background:var(--sx-feuille);color:#fff}

.act-grande{grid-column:1/3;grid-row:1/3;min-height:560px;border:0}
.act-grande h3{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.2rem)}
.act-grande p{font-size:15.4px;max-width:46ch}
.act-puces{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.act-puces span{font:600 12.4px/1 var(--sx-titre);padding:8px 12px;border-radius:99px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);color:#fff}

.act-campagne{grid-column:3/5;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border-color:#D5EBCB;
  background:linear-gradient(160deg,#fff,var(--sx-feuille-v))}
.act-campagne-img{position:relative;min-height:260px;overflow:hidden}
.act-en-cours{position:absolute;left:14px;top:14px;z-index:1;display:inline-flex;align-items:center;gap:7px;background:var(--sx-feuille);
  color:#fff;font:700 11px/1 var(--sx-titre);letter-spacing:.6px;text-transform:uppercase;padding:7px 11px;border-radius:99px}
.act-en-cours::before{content:'';width:7px;height:7px;border-radius:50%;background:#B8F09A;animation:sx-battement 2.4s ease-in-out infinite}
.act-campagne-txt{padding:24px 24px 24px 22px;display:flex;flex-direction:column;gap:12px}
.act-campagne-txt h3{margin:0}
.act-campagne-txt p{font-size:14px;color:var(--sx-ardoise);line-height:1.6}
.act-kit{list-style:none;display:flex;gap:8px;flex-wrap:wrap}
.act-kit li{display:inline-flex;align-items:center;gap:6px;font:600 12.4px/1 var(--sx-titre);color:var(--sx-graphite);
  background:#fff;border:1px solid #D5EBCB;border-radius:99px;padding:7px 11px}
.act-kit svg{width:14px;height:14px;color:var(--sx-feuille)}
.act-chiffres{display:flex;gap:22px;padding-top:4px}
.act-chiffres b{display:block;font:800 1.7rem/1 var(--sx-titre);letter-spacing:-.04em;color:var(--sx-feuille)}
.act-chiffres span{display:block;font-size:12px;color:var(--sx-ardoise);margin-top:4px}
.act-campagne-txt .btn{align-self:flex-start;margin-top:auto}

.act-photo{min-height:300px;border:0}
.act-bxl{padding:24px;display:flex;flex-direction:column;gap:14px;background:var(--sx-feuille-v);border-color:#D5EBCB}
.act-bxl h3{margin:0}
.act-bxl-item{display:flex;gap:12px;align-items:flex-start}
.act-bxl-item .ico{width:40px;height:40px;border-radius:12px;background:#fff}
.act-bxl-item .ico svg{width:19px;height:19px}
.act-bxl-item b{display:block;font:600 14.6px/1.3 var(--sx-titre)}
.act-bxl-item span{display:block;font-size:13px;color:var(--sx-ardoise);line-height:1.5;margin-top:2px}
.act-bxl-item > div{min-width:0}

.act-don{margin-top:18px;display:grid;grid-template-columns:minmax(0,1.3fr) auto auto;gap:24px;align-items:center;
  background:var(--sx-encre);color:#fff;border-radius:24px;padding:22px 26px}
.act-don-txt{display:flex;gap:16px;align-items:center}
.act-don-txt img{height:60px;width:auto;background:#fff;border-radius:12px;padding:5px 7px;flex-shrink:0}
.act-don-txt b{display:block;font:700 1.08rem/1.3 var(--sx-titre);color:#fff}
.act-don-txt span{display:block;font-size:13.6px;color:rgba(255,255,255,.78);margin-top:3px;line-height:1.5}
.act-don-iban{display:flex;gap:22px;margin:0}
.act-don-iban dt{font:700 10.5px/1.3 var(--sx-titre);letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.6)}
.act-don-iban dd{margin:4px 0 0;font-size:14.6px;font-weight:600;color:#fff;white-space:nowrap}

@media (max-width:1020px){
  .actions-mosaique{grid-template-columns:repeat(2,minmax(0,1fr))}
  .act-grande{grid-column:1/3;grid-row:auto;min-height:440px}
  .act-campagne{grid-column:1/3}
  .act-don{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:680px){
  .actions-mosaique{grid-template-columns:minmax(0,1fr)}
  .act-grande,.act-campagne{grid-column:auto}
  .act-campagne{grid-template-columns:minmax(0,1fr)}
  .act-campagne-img{min-height:200px}
  .act-don-iban{flex-direction:column;gap:10px}
}

/* ═══ HERO — diaporama de l'association ════════════════════════════════
   Trois photos en fondu enchaine (12 s la boucle), en CSS seul. Sans
   mouvement demande : la premiere photo reste, les autres sont masquees. */
.ae-diapo{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--sx-encre)}
.ae-diapo-f{position:absolute;inset:0;margin:0;opacity:0;animation:ae-fondu 12s infinite}
.ae-diapo-f:nth-child(1){animation-delay:0s}
.ae-diapo-f:nth-child(2){animation-delay:4s}
.ae-diapo-f:nth-child(3){animation-delay:8s}
.ae-diapo-f img{width:100%;height:100%;object-fit:cover;animation:ae-zoom 12s infinite;animation-delay:inherit}
.ae-diapo-f::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(23,21,47,.7))}
.ae-diapo-f figcaption{position:absolute;left:16px;bottom:14px;z-index:1;color:#fff;font:700 14px/1.2 var(--sx-titre);
  letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.ae-diapo-f figcaption::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--sx-feuille-vif);
  box-shadow:0 0 0 3px rgba(95,181,58,.3)}
@keyframes ae-fondu{0%{opacity:0}4%{opacity:1}33%{opacity:1}37%{opacity:0}100%{opacity:0}}
@keyframes ae-zoom{0%{transform:scale(1)}37%{transform:scale(1.07)}100%{transform:scale(1.07)}}
.ae-diapo-points{position:absolute;right:14px;bottom:17px;z-index:1;display:flex;gap:6px}
.ae-diapo-points i{width:18px;height:4px;border-radius:99px;background:rgba(255,255,255,.35);overflow:hidden;position:relative}
.ae-diapo-points i::after{content:'';position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;
  animation:ae-point 12s infinite}
.ae-diapo-points i:nth-child(2)::after{animation-delay:4s}
.ae-diapo-points i:nth-child(3)::after{animation-delay:8s}
@keyframes ae-point{0%{transform:scaleX(0);opacity:1}33%{transform:scaleX(1);opacity:1}34%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .ae-diapo-f:nth-child(1){opacity:1}
  .ae-diapo-points{display:none}
}
.carte-ae-mission{font-size:14.2px;line-height:1.6;color:var(--sx-graphite);margin:14px 0 4px}
.carte-ae .ae-axes{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px 0 4px}
.carte-ae .ae-axes li{display:flex;align-items:center;gap:10px;background:var(--sx-creme);border:1px solid var(--sx-trait);
  border-radius:12px;padding:8px 10px;font:600 13.4px/1.25 var(--sx-titre);color:var(--sx-encre);min-width:0}
.ae-axes .ico{width:32px;height:32px;border-radius:9px;flex-shrink:0}
.ae-axes .ico svg{width:16px;height:16px}
.carte-ae .ae-axes li span{min-width:0}