/* Page de soutien habillée comme le reste du site (maquette Claude Design) : polices, couleurs, en-tête et menu.
   Chargée après app.css ; ne change rien au fonctionnement de la page. */
@import url(../../assets/polices.css);
:root,:root:not(#x){
  --lac:#0B2236;--lac-deep:#0B2236;--on-lac:#F3F8FB;--on-lac-2:#B9D7EA;--glacier:#9CC6E0;
  --bg:#F3F8FB;--surface:#FFFFFF;--sunk:#EAF3F9;--line:#C9DCE8;--line-2:#B5CCDC;
  --ink:#0B2236;--ink-2:#2C4558;--muted:#4A6176;--froid:#1E4E73;--froid-soft:#DCEFFA;
  --bouee:#D2341F;--bouee-2:#B42A17;--on-bouee:#FFFFFF;--bouee-soft:#FBE3D9;
  --ok:#1F7A4D;--ok-soft:#DDF3E8;--bad:#B4380F;--bad-soft:#FBE3D9;
  --font:'Instrument Sans','Helvetica Neue',system-ui,sans-serif;--r:24px;--r-s:12px;
  --shadow:none;color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{--bg:#F3F8FB;--surface:#FFFFFF;--sunk:#EAF3F9;--line:#C9DCE8;--line-2:#B5CCDC;--ink:#0B2236;--ink-2:#2C4558;--muted:#4A6176;--froid:#1E4E73;--froid-soft:#DCEFFA;--bouee-soft:#FBE3D9;--ok:#1F7A4D;--ok-soft:#DDF3E8;--bad:#B4380F;--bad-soft:#FBE3D9;color-scheme:light}
  .seg button[aria-selected="true"]{border-color:var(--lac);box-shadow:inset 0 0 0 1px var(--lac)}
  .chip[aria-pressed="true"]{background:var(--lac);border-color:var(--lac);color:#fff}
  .moyen:has(input:checked){border-color:var(--lac);box-shadow:inset 0 0 0 1px var(--lac)}}
body{font-family:var(--font);font-size:17px;line-height:1.55;font-stretch:normal}
html{scroll-padding-top:16px}
.wrap{max-width:1200px;padding-inline:24px}
/* bandeau */
.hero{background:#0B2236}
.hero::before{display:none}
.degres{font-family:'Big Shoulders Display','Arial Narrow',sans-serif;font-stretch:normal;color:rgba(220,239,250,.10)}
.hero h1{font-family:'Big Shoulders Display','Arial Narrow',sans-serif;font-weight:900;font-stretch:normal;text-transform:uppercase;font-size:clamp(46px,6.4vw,92px);line-height:.9;letter-spacing:-.005em}
.hero h1 span{font-weight:900;color:#9CC6E0}
.eyebrow{font-stretch:normal;letter-spacing:.14em;color:#9CC6E0}
.jauge{background:#0F2C46;border-color:#24476A;border-radius:24px;backdrop-filter:none}
.jauge .total{font-family:'Big Shoulders Display','Arial Narrow',sans-serif;font-stretch:normal;font-weight:900;color:#F3F8FB;font-size:clamp(48px,6vw,72px)}
.jauge .bar{height:8px;background:#24476A}.jauge .bar i{background:#9CC6E0}
.compte{background:rgba(220,239,250,.14);color:#DCEFFA}
.bouees{height:0;background:none}
/* titres et cartes */
h2{font-stretch:normal;font-weight:700;font-size:22px;letter-spacing:0}
#sponsors h2,.h2s{font-family:'Big Shoulders Display','Arial Narrow',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(36px,4.4vw,56px);line-height:.95}
.h2s{font-size:28px}
h3{font-stretch:normal}
.card{border-radius:24px;box-shadow:none}
.step{background:#0B2236;font-stretch:normal}
.total-line b{font-family:'Big Shoulders Display','Arial Narrow',sans-serif;font-stretch:normal;font-size:36px}
.btn{border-radius:999px;font-stretch:normal}
.btn.big{border-radius:999px;min-height:60px;font-size:18px}
.btn.primary:hover{filter:none;background:#B42A17;border-color:#B42A17}
.btn.ghost{border-color:#9CC6E0}
.input{border-radius:12px;min-height:48px}
.seg button,.ligne,.moyen,.vide-panier{border-radius:16px}
.info{border-radius:24px}
footer{background:#0B2236;color:#DCEFFA}footer a{color:#DCEFFA}
/* en-tête et menu du site (mêmes liens que les autres pages) */
.ng-bande{background:#0B2236;color:#F3F8FB;border-bottom:1px solid #24476A}
.ng-tete{max-width:1200px;margin:0 auto;padding:22px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 20px}
.ng-actions a{padding:0 16px!important}
.ng-logo{display:flex;flex-direction:column;text-decoration:none;color:#F3F8FB;line-height:1}
.ng-logo b{font-family:'Big Shoulders Display','Arial Narrow',sans-serif;font-weight:900;font-size:30px;letter-spacing:.02em;text-transform:uppercase}
.ng-logo span{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#9CC6E0;margin-top:5px}
/* 2.11 : logo de l'association dans l'en-tête */
.ng-logo .ng-embleme{display:block;width:auto;height:72px;align-self:flex-start}
@media (max-width:520px){.ng-logo .ng-embleme{height:56px}}
.ng-menu{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:15px;font-weight:500}
.ng-menu a{color:#F3F8FB;text-decoration:none;padding:10px 0;border-bottom:2px solid transparent}
.ng-menu a:hover,.ng-menu a[aria-current]{color:#fff;border-bottom-color:#7FB8D8}
.ng-actions{display:flex;flex-wrap:wrap;gap:10px}
.ng-actions a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;color:#F3F8FB;border:1.5px solid #9CC6E0}
.ng-actions a.ng-accent{background:#D2341F;border-color:#D2341F;color:#fff}
#ng-menu-ouvert,.ng-burger{display:none}
@media (min-width:1341px){.ng-tete{max-width:1320px}} /* 09.11.2026 : même en-tête que le site (« Devenir membre » dans le menu) */
@media (max-width:1340px){
  .ng-tete{display:grid;grid-template-columns:1fr auto}
  .ng-burger{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1.5px solid #9CC6E0;border-radius:999px;color:#F3F8FB;font-weight:600;font-size:15px;cursor:pointer}
  .ng-menu,.ng-actions{display:none;grid-column:1/-1}
  #ng-menu-ouvert:checked~.ng-menu{display:flex;flex-direction:column;align-items:stretch;gap:0;border-top:1px solid #24476A}
  #ng-menu-ouvert:checked~.ng-menu a{padding:14px 0;border-bottom:1px solid #24476A}
  #ng-menu-ouvert:checked~.ng-actions{display:flex}
}
/* 05.11 : classement des parrainages (remplace la jauge et le top 3 du bandeau), sur le modèle du site WordPress :
   top 5 nageurs, top 5 équipes (podium or, argent, bronze) et total collecté dans un thermomètre gradué de 0 à l'objectif */
.hero-in{grid-template-columns:minmax(0,1fr);padding-bottom:30px}
.hero-in>div{max-width:960px}
.classement{position:relative;padding-block:6px 46px}
.classement h2{margin:0 0 18px;font-family:'Big Shoulders Display','Arial Narrow',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(28px,3.4vw,42px);line-height:1;letter-spacing:.005em;color:#F3F8FB;text-wrap:balance}
.cl-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
@media (max-width:980px){.cl-grille{grid-template-columns:repeat(2,minmax(0,1fr))}.cl-total{grid-column:1/-1}}
@media (max-width:640px){.cl-grille{grid-template-columns:minmax(0,1fr)}}
.cl-col{background:#0F2C46;border:1px solid #24476A;border-radius:24px;padding:20px 20px 14px;min-width:0}
.cl-col h3{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9CC6E0}
.podium{list-style:none;margin:0;padding:0;display:grid}
.podium li.pl{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid #24476A}
.podium li.pl:last-child{border-bottom:0}
.podium .rang{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1.5px solid #4F7FA3;color:#DCEFFA;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.podium .or .rang{background:#E8B931;border-color:#E8B931;color:#2B1B00}
.podium .argent .rang{background:#CBD6DF;border-color:#CBD6DF;color:#0B2236}
.podium .bronze .rang{background:#D08B57;border-color:#D08B57;color:#2B1300}
.podium .qui{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.podium .qui b{color:#F3F8FB;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.podium .qui small{color:#B9D7EA;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.podium .mt{color:#F3F8FB;font-weight:700;white-space:nowrap}
.cl-vide{color:#B9D7EA;font-size:15px;padding:6px 0 10px}
.thermo-zone{display:flex;align-items:center;gap:10px}
.thermo{flex:none;width:118px}
.thermo svg{display:block;width:100%;height:auto;overflow:visible}
.th-tube{fill:#0B2236;stroke:#4F7FA3;stroke-width:1.5}
.th-mercure{fill:#D2341F}
.thermo rect.th-mercure{transform-box:fill-box;transform-origin:50% 100%;animation:ng-mercure 1.6s cubic-bezier(.2,.7,.2,1) .2s both}
@keyframes ng-mercure{from{transform:scaleY(0)}}
.th-trait{stroke:#9CC6E0;stroke-width:1.5}.th-trait.fin{stroke-width:1;opacity:.55}
.th-gr{fill:#B9D7EA;font:600 11px 'Instrument Sans','Helvetica Neue',system-ui,sans-serif;font-variant-numeric:tabular-nums}
.thermo-texte{display:flex;flex-direction:column;gap:6px;padding-bottom:14px;min-width:0}
.cl-total .total{display:block;margin:2px 0 6px;font-family:'Big Shoulders Display','Arial Narrow',sans-serif;font-weight:900;font-size:clamp(40px,4vw,56px);line-height:1;color:#F3F8FB;white-space:nowrap}
.cl-total .pour,.cl-total .meta{color:#B9D7EA;font-size:14.5px}
.cl-total .meta b{color:#F3F8FB}
@media (max-width:420px){.thermo{width:108px}}