/* Généré par apps/identite/fabriquer.mjs. Ne pas modifier : jetons de site/charte-v1/tokens.json,
   classes de site/charte-v1/components/bundle.css, puis apps/identite/src/identite.css. */
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{--font-sans:Inter, system-ui, -apple-system, "Segoe UI", sans-serif;--font-num:"Barlow Condensed", "Arial Narrow", sans-serif;--space-9:9px;--space-12:12px;--space-14:14px;--space-20:20px;--space-26:26px;--space-34:34px;--space-60:60px;--radius-sm:12px;--radius-md:16px;--radius-lg:22px;--radius-xl:24px;--radius-pill:999px;--stroke-grand:3.4;--stroke-ecran:5.3;--stroke-petit:7.1;--stroke-micro:9}
:root,:root[data-theme=ao]{--bg:#f5f5f0;--surface:#ffffff;--raised:#eeefeb;--text:#192b30;--muted:#59666a;--line:rgba(18,42,47,0.13);--accent:#86d5bf;--accent-text:#176b5a;--on-accent:#061412;--aha:#176b5a;--athlete:#36d6b6;--athlete-text:#176b5a;--coach:#e8c27a;--coach-text:#78541c;--club:#8fb0ff;--club-text:#385a9d;--organizer:#ff7a6b;--organizer-text:#a23c30;--ok:#00796b;--warn:#b85c00;--bad:#c62828;--halo-violet:rgba(185,167,224,0.35);--nacre-mint:#2e9e88;--nacre-lilac:#7d68b8;--nacre-green:#2e9e88;--nacre-violet:#7d68b8;--course-bg:#000000;--course-surface:#1e2124;--course-accent:#ff6a1a;--series-yellow:#ffc83a;--series-green:#a6e36b;--series-violet:#b9a0ff;--series-grey:#6b7280;color-scheme:light}
:root[data-theme=po]{--bg:#060708;--surface:#0f1112;--raised:#191c1e;--text:#ecedea;--muted:#a3a7a7;--line:rgba(255,255,255,0.09);--accent:#86d5bf;--accent-text:#a9e6d6;--on-accent:#061412;--aha:#86d5bf;--athlete:#36d6b6;--athlete-text:#36d6b6;--coach:#e8c27a;--coach-text:#e8c27a;--club:#8fb0ff;--club-text:#8fb0ff;--organizer:#ff7a6b;--organizer-text:#ff7a6b;--ok:#36d6b6;--warn:#ffa64a;--bad:#ff6b5b;--halo-violet:rgba(120,90,160,0.30);--nacre-mint:#8bd8c7;--nacre-lilac:#d7c8f2;--nacre-green:#7fd3be;--nacre-violet:#b9a7e0;--course-bg:#000000;--course-surface:#1e2124;--course-accent:#ff6a1a;--series-yellow:#ffc83a;--series-green:#a6e36b;--series-violet:#b9a0ff;--series-grey:#6b7280;color-scheme:dark}
/* NATI · Charte graphique V1 — classes partagées. La graisse du mot NATI découle du trait des symboles. */
.nati-brand{display:inline-flex;align-items:center;gap:.31em;color:var(--text);text-decoration:none;white-space:nowrap;font:300 19px/1 var(--font-sans)}
.nati-brand b{font-weight:inherit;letter-spacing:.34em;margin-right:-.34em}
.nati-symbol{width:1.3em;height:1.3em;flex:none;fill:none;stroke:currentColor;stroke-width:5.3;stroke-linecap:round;stroke-linejoin:round}
.nati-brand>.nati-symbol:first-child{color:var(--aha)}
.nati-brand.grand{font-size:48px;font-weight:200}.nati-brand.grand .nati-symbol{stroke-width:3.4}
.nati-brand.petit{font-size:12px;font-weight:400}.nati-brand.petit .nati-symbol{stroke-width:7.1}
.nati-brand.produit>.nati-symbol:first-child{color:var(--text)}
.nati-brand .sep{width:0;align-self:stretch;margin:-.12em .62em;border-left:.068em solid var(--muted);opacity:.55}
.nati-brand.grand .sep{border-left-width:.044em}.nati-brand.petit .sep{border-left-width:.093em}
.nati-brand .produit-nom{color:var(--produit,var(--text));letter-spacing:.02em}
.nati-brand .produit-nom~*,.nati-brand .sep~.nati-symbol{color:var(--produit,var(--text))}
.nati-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-9);min-height:46px;padding:12px 19px;border:0;border-radius:var(--radius-md);background:var(--accent);color:var(--on-accent);font:600 13px/1.4 var(--font-sans);text-decoration:none;cursor:pointer}
.nati-button:hover{filter:brightness(1.06)}
.nati-button:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
.nati-button:disabled{opacity:.55;cursor:wait}
.nati-button.secondary{background:transparent;color:var(--text);border:1px solid var(--line)}
.nati-card{padding:var(--space-26);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);color:var(--text)}
.nati-card h3{margin:0 0 12px;font:600 18px/1.4 var(--font-sans);letter-spacing:-.025em}
.nati-card p{margin:0;font:400 13px/1.7 var(--font-sans);color:var(--muted)}
.nati-eyebrow{font:600 11px/1.4 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nati-notice{font:400 13px/1.5 var(--font-sans);padding:12px 16px;background:var(--raised);color:var(--muted);border-radius:var(--radius-sm)}
.nati-notice.error{border-left:3px solid var(--bad);color:var(--text);border-radius:0}
.nati-figure{display:flex;align-items:baseline;gap:14px;color:var(--text)}
.nati-figure b{font:600 92px/1.2 var(--font-num)}
.nati-figure span{font:400 11px/1.7 var(--font-sans);color:var(--muted);max-width:90px}
.nati-pearl-stage{position:relative;display:grid;place-items:center;isolation:isolate}
.nati-pearl-stage::before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(134,213,191,.19),rgba(134,213,191,.06) 55%,transparent 75%);filter:blur(14px);z-index:-1}
.nati-pearl-stage canvas{width:100%;height:100%;display:block}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* NATI Identité : pages Connexion, Activation et Mon NATI, sur les jetons de la charte V1. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font:400 16px/1.65 var(--font-sans);-webkit-font-smoothing:antialiased}
h1,h2,p{margin:0}
a{color:var(--accent-text);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:4px}
main:focus{outline:none}
button,input{font:inherit}
.visuellement-cache{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lien-evitement{position:absolute;left:16px;top:-80px;z-index:60;padding:12px 18px;border-radius:var(--radius-md);background:var(--accent);color:var(--on-accent);font-weight:600;text-decoration:none}
.lien-evitement:focus{top:12px}

.signature{display:inline-flex;flex:none;line-height:0}
.signature img{width:auto;height:22px;max-width:100%}
.signature--petit img{height:12px}
.signature-po{display:none!important}
[data-theme=po] .signature-ao{display:none!important}
[data-theme=po] .signature-po{display:block!important}

.ton-tu{display:none}
[data-ton=tu] .ton-tu{display:inline}
[data-ton=tu] .ton-vous{display:none}

/* --- Bandeau ------------------------------------------------------------------ */
.bandeau{display:flex;align-items:center;gap:12px;width:100%;max-width:1180px;margin:0 auto;min-height:64px;padding:8px max(20px,env(safe-area-inset-right)) 8px max(20px,env(safe-area-inset-left));padding-top:calc(8px + env(safe-area-inset-top));border-bottom:1px solid var(--line)}
.bandeau-signature{display:inline-flex;align-items:center;min-height:48px}
.bandeau-lieu{margin-right:auto;padding-left:12px;border-left:1px solid var(--line);font:600 11px/1.4 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.modes{display:inline-flex;align-items:center}
.modes button{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:44px;padding:0 6px;border:0;background:transparent;color:var(--muted);font:500 12px/1 var(--font-sans);cursor:pointer}
.modes button:hover{color:var(--text)}
.modes button[aria-pressed=true]{color:var(--text);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.5em}
html:not(.js) .modes{display:none}
.bandeau form{margin:0}
.bandeau .nati-button{min-height:44px;padding:8px 14px;font-size:14px;white-space:nowrap}
@media (max-width:420px){.bandeau{gap:6px;padding-left:16px;padding-right:16px}.bandeau-lieu{display:none}.bandeau-signature{margin-right:auto}.modes button{min-width:30px;padding:0 4px}.bandeau .nati-button{padding:8px 10px}}

/* --- Contenu ------------------------------------------------------------------ */
main{flex:1;width:100%}
.colonne{display:grid;gap:20px;width:100%;max-width:560px;margin:0 auto;padding:48px 20px 64px}
.large{max-width:960px}
h1{font:600 clamp(34px,7vw,52px)/1.06 var(--font-sans);letter-spacing:-.035em}
h2{font:600 20px/1.3 var(--font-sans);letter-spacing:-.02em}
.chapeau{font-size:clamp(17px,2.4vw,19px);line-height:1.5;color:var(--muted)}
.formulaire{display:grid;gap:14px}
.etiquette{font:600 11px/1.4 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.champ{width:100%;min-height:52px;padding:0 16px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--raised);color:var(--text);caret-color:var(--accent-text);font-size:17px}
.champ:focus{outline:2px solid var(--accent-text);outline-offset:1px;border-color:transparent}
.formulaire .nati-button{min-height:52px;font-size:15px}
.message{padding:10px 14px;border-left:3px solid var(--bad);background:var(--raised);font-size:14px;font-weight:500}
.message.ok{border-left-color:var(--ok)}
.note{font-size:13px;line-height:1.6;color:var(--muted)}

/* Portes : tuiles de Mon NATI et portes pas encore branchées. */
.portes{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.large .portes{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.porte{display:grid;gap:10px;align-content:start}
.porte p{font-size:14px}
.porte .nati-button{justify-self:start;margin-top:6px}
.autres{display:grid;gap:12px;padding-top:20px;border-top:1px solid var(--line)}
.autres ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.autres a{display:inline-flex;align-items:center;min-height:44px}

/* --- Pied de page ------------------------------------------------------------- */
.pied{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;width:100%;max-width:1180px;margin:0 auto;padding:20px max(20px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.pied-signature{display:inline-flex;align-items:center;min-height:44px}
.devise{color:var(--text);margin-right:auto}
.pied nav{display:flex;flex-wrap:wrap;gap:0 18px}
.pied nav a{display:inline-flex;align-items:center;min-height:40px;color:var(--muted);text-decoration:none}
.pied nav a:hover{color:var(--text);text-decoration:underline}

/* --- Lieu unique : accueil, Mon NATI, vitrine ---------------------------------- */
.lieu{display:grid;gap:8px;padding-bottom:24px}
.bandeau-lieu{text-decoration:none}
.bandeau-lieu:hover{color:var(--text)}
.bloc{display:grid;gap:14px;margin-top:12px}
h3{margin:0;font:600 18px/1.35 var(--font-sans);letter-spacing:-.02em}
h4{margin:0;font:600 17px/1.35 var(--font-sans);letter-spacing:-.02em}
.abonnements{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.abonnements li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.statut{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--muted)}
.statut::before{content:"○";font-size:12px;color:var(--text)}
.statut.disponible::before{content:"●";color:var(--ok)}
.vitrine{display:grid;gap:14px;width:100%;max-width:1080px;margin:0 auto;padding:40px 20px 24px;border-top:1px solid var(--line)}
.vitrine>h2{font:600 clamp(26px,4.5vw,36px)/1.12 var(--font-sans);letter-spacing:-.03em}
.besoin{display:grid;gap:12px;margin-top:18px}
.offres{display:grid;gap:14px;margin:0;padding:0;list-style:none;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.offre{display:grid;gap:10px;align-content:start}
.offre p{font-size:14px}
.offre-tete{display:flex;align-items:center;gap:12px}
.icone{width:40px;height:40px;border-radius:11px;flex:none}
.offre-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:4px}
.lien-action{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:500}

/* --- Mes documents et administration --------------------------------------------- */
.dossier{display:grid;gap:10px}
.lignes{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.lignes li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding:10px 0;border-bottom:1px solid var(--line)}
.lignes li:last-child{border-bottom:0}
.lignes form,.ligne{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.code-court{width:110px;min-height:44px;font-size:15px}
select.champ{appearance:auto}
.cases{display:grid;gap:6px;margin:0;padding:0;border:0}
.case{display:flex;align-items:center;gap:10px;min-height:40px;font-size:15px}
.case input{width:20px;height:20px;accent-color:var(--accent)}
.table{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.admin table{width:100%;border-collapse:collapse;font-size:14px}
.admin th,.admin td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.admin th{font:600 11px/1.4 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.admin tr:last-child td{border-bottom:0}
.secret{display:grid;gap:8px}
.secret code{font:600 20px/1.4 var(--font-num);letter-spacing:.08em;word-break:break-all}
.secret code.petit{font:400 13px/1.5 ui-monospace,monospace;letter-spacing:0}
.codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:0;list-style:none}
.codes code{font:600 17px/1.4 var(--font-num);letter-spacing:.06em}