:root{
  color-scheme:dark;
  --lin:#020033;
  --lin-2:#010021;
  --encre:#eef3fb;
  --encre-doux:#a2a5bb;
  --encre-faible:#8586a3;
  --or:#00a3e4;
  --or-vif:#00a3e4;
  --or-pale:#4cbeec;
  --sauge-pale:rgba(0,163,228,.16);
  --blanc:rgba(255,255,255,.07);
  --bord:rgba(0,163,228,.32);
  --carte:rgba(1,0,35,.45);
  --alerte:#f0a58e;
  --titre:'League Spartan','Montserrat',-apple-system,sans-serif;
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --rayon:14px;
  --arrondi:34px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--encre);background:var(--lin);
  min-height:100svh;line-height:1.65;-webkit-font-smoothing:antialiased}
[hidden]{display:none !important}

/* ---------------------------------------------------------- fond */
#fond{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:linear-gradient(160deg,#04054a 0%,var(--lin) 42%,var(--lin-2) 100%)}
#fond .voile{position:absolute;inset:0;
  background:radial-gradient(48rem 32rem at 102% 2%,rgba(0,163,228,.26) 0%,transparent 62%),
    radial-gradient(36rem 28rem at -8% 96%,rgba(0,105,166,.22) 0%,transparent 60%)}

/* ---------------------------------------------------------- structure */
.ecran{min-height:100svh;display:flex;flex-direction:column;
  padding:max(22px,env(safe-area-inset-top)) 14px max(24px,env(safe-area-inset-bottom));
  max-width:748px;margin:0 auto}
.carte{background:var(--carte);border:1px solid var(--bord);border-radius:var(--arrondi);
  padding:30px 22px 28px;box-shadow:0 22px 56px rgba(0,0,0,.19)}
@supports((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .carte{backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2)}
}
@media(min-width:621px){
  .ecran{padding:44px 20px 34px}
  .carte{padding:46px 48px 42px}
}
@keyframes entree{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.anim{animation:entree .45s cubic-bezier(.2,.7,.3,1) both}

/* ---------------------------------------------------------- onglets */
.onglets{display:flex;gap:4px;align-self:center;margin-bottom:18px;padding:5px;
  background:var(--carte);border:1px solid var(--bord);border-radius:999px}
.onglet{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.03em;color:var(--encre-doux);
  background:none;border:none;border-radius:999px;padding:11px 26px;min-width:132px;cursor:pointer;
  transition:background .18s,color .18s}
.onglet:hover{color:var(--encre)}
.onglet[aria-selected=true]{background:var(--or-vif);color:var(--lin)}
.onglet:focus-visible,.btn:focus-visible{outline:2px solid var(--or-pale);outline-offset:3px}

/* ---------------------------------------------------------- titres */
.sur-titre{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--encre-doux);font-weight:600;margin-bottom:16px}
.rec{width:8px;height:8px;border-radius:50%;background:var(--or-vif);
  box-shadow:0 0 0 4px rgba(0,163,228,.2);animation:rec 1.8s ease-in-out infinite}
@keyframes rec{50%{opacity:.35}}
h1{font-family:var(--titre);font-weight:600;font-size:clamp(33px,7vw,50px);line-height:1.1;
  letter-spacing:-.005em;color:var(--or)}
h1:focus{outline:none}
h2{font-family:var(--titre);font-weight:600;font-size:clamp(26px,5.4vw,37px);line-height:1.2;color:var(--or)}
.trait{display:block;width:209px;max-width:60%;height:8px;margin-top:20px;border-radius:999px;
  background:linear-gradient(90deg,var(--or-vif),rgba(0,163,228,0))}
.chapeau{margin-top:22px;font-size:16.5px;color:var(--encre-doux);max-width:52ch}
.chapeau strong{color:var(--or-pale);font-weight:600}

/* ---------------------------------------------------------- champs */
form{margin-top:28px}
.champ + .champ{margin-top:18px}
label{display:block;font-size:13.5px;font-weight:600;letter-spacing:.02em;color:var(--encre);margin-bottom:8px}
.facultatif{font-weight:400;color:var(--encre-faible)}
input[type=text],input[type=email],input[type=password],select{
  width:100%;font-family:var(--sans);font-size:16.5px;color:var(--encre);background:var(--blanc);
  border:1px solid var(--bord);border-radius:var(--rayon);padding:15px 17px;min-height:54px;
  transition:border-color .2s,box-shadow .2s,background .2s}
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%2300a3e4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center}
select:has(option[value=""]:checked){color:var(--encre-faible)}
option{background:var(--lin);color:var(--encre)}
input:focus,select:focus{outline:none;border-color:var(--or-vif);background-color:rgba(255,255,255,.11);
  box-shadow:0 0 0 3px rgba(0,163,228,.28)}
input::placeholder{color:var(--encre-faible)}
input:-webkit-autofill{-webkit-text-fill-color:var(--encre);caret-color:var(--encre);
  box-shadow:0 0 0 100px #0a1550 inset;transition:background-color 9999s}

.erreur-champ{display:none;margin-top:7px;font-size:13.5px;font-weight:500;color:var(--alerte)}
.erreur-champ::before{content:"! ";font-weight:700}
input:user-invalid,select:user-invalid,.invalide{border-color:var(--alerte)}
input:user-invalid + .erreur-champ,select:user-invalid + .erreur-champ,.invalide + .erreur-champ{display:block}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------------------------------------------------------- actions */
.actions{display:flex;align-items:center;gap:14px;margin-top:30px;flex-wrap:wrap}
.btn{font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.02em;border:none;border-radius:999px;
  padding:16px 34px;min-height:52px;cursor:pointer;background:var(--or-vif);color:var(--lin);
  transition:transform .18s,box-shadow .18s,opacity .18s,background .18s;box-shadow:0 5px 18px rgba(0,0,0,.3)}
.btn:hover{background:var(--or-pale);transform:translateY(-2px);box-shadow:0 9px 26px rgba(0,0,0,.34)}
.btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.btn.or{background:transparent;color:var(--or);border:1px solid var(--or-vif);box-shadow:none}
.btn.or:hover{background:rgba(0,163,228,.16)}
.btn.fantome{background:none;color:var(--encre-doux);box-shadow:none;padding-inline:10px;font-weight:500}
.btn.fantome:hover{color:var(--or);background:none;transform:none;box-shadow:none}
.btn.petit{font-size:13.5px;padding:10px 20px;min-height:44px}
#formulaire .btn,#acces .btn{width:100%}
@media(min-width:621px){#formulaire .btn,#acces .btn{width:auto}}
.erreur{margin-top:16px;font-size:14px;font-weight:500;color:var(--alerte)}
.rgpd{margin-top:26px;font-size:12px;color:var(--encre-faible);max-width:46ch;line-height:1.55}

/* ---------------------------------------------------------- fiche enregistrée */
.coche{width:66px;height:66px;border-radius:50%;background:var(--or-vif);
  display:flex;align-items:center;justify-content:center;margin-bottom:24px;
  box-shadow:0 8px 24px rgba(0,0,0,.3)}
.coche::after{content:"";width:14px;height:26px;border:solid var(--lin);border-width:0 2.5px 2.5px 0;
  transform:rotate(43deg) translateY(-2px)}
#bloc-merci h1{font-size:clamp(29px,6.2vw,44px)}
.numero{display:flex;gap:10px;margin-top:22px}
.numero span{flex:0 1 74px;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;
  font-family:var(--titre);font-weight:700;font-size:clamp(38px,11vw,54px);line-height:1;padding-top:.12em;
  color:var(--encre);background:var(--sauge-pale);border:1px solid var(--or-vif);border-radius:var(--rayon);
  box-shadow:0 8px 24px rgba(0,0,0,.24);user-select:all;-webkit-user-select:all}

/* ---------------------------------------------------------- bdd */
.tete-bdd{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.tete-bdd .sur-titre{margin-bottom:8px}
.outils{display:flex;align-items:center;gap:6px}
.vide{margin-top:24px;font-size:15px;color:var(--encre-doux)}
.table-defile{margin-top:24px}
table{width:100%;border-collapse:collapse;font-size:14.5px}
td{overflow-wrap:anywhere}
.c-code{font-family:var(--titre);font-weight:700;font-size:19px;letter-spacing:.12em;color:var(--or-pale)}
.c-date,.c-libre.vide{color:var(--encre-doux)}

/* Jamais de défilement horizontal : une carte par fiche tant que l'écran est étroit,
   un tableau dont les textes passent à la ligne quand la place est là. */
@media(max-width:979px){
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  table,tbody{display:block}
  tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 7px;padding:15px 17px;
    background:var(--blanc);border:1px solid var(--bord);border-radius:var(--rayon)}
  tr + tr{margin-top:10px}
  td{display:block;min-width:0}
  .c-code{flex:0 0 calc(50% - 4px);order:0}
  .c-date{flex:0 0 calc(50% - 4px);order:1;text-align:right;font-size:12.5px}
  .c-nom,.c-prenom{order:2;font-weight:600;font-size:16px}
  .c-nom{text-transform:uppercase;letter-spacing:.02em}
  .c-email{order:3;flex:0 0 100%;color:var(--encre-doux)}
  .c-paiement{order:4;font-size:13.5px}
  .c-libre{order:5;font-size:13.5px;color:var(--encre-doux)}
  .c-libre:not(.vide)::before{content:"· "}
  .c-libre.vide{display:none}
}
@media(min-width:980px){
  .ecran:has(#bloc-fiches:not([hidden])):has(#panneau-bdd:not([hidden])){max-width:1100px}
  .table-defile{overflow:hidden;border:1px solid var(--bord);border-radius:var(--rayon);background:rgba(255,255,255,.03)}
  th{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--encre-doux);
    text-align:left;padding:13px 14px;border-bottom:1px solid var(--bord);white-space:nowrap}
  td{padding:13px 14px;border-bottom:1px solid rgba(0,163,228,.14);vertical-align:top}
  tbody tr:last-child td{border-bottom:none}
  .c-code,.c-date{white-space:nowrap;overflow-wrap:normal}
  .c-code{font-size:16px}
}

/* ---------------------------------------------------------- pied */
.signature-bas{text-align:center;padding-top:4px;margin-top:auto}
.par-stratema{display:inline-flex;align-items:center;gap:8px;margin:18px auto 0;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  color:var(--encre-doux);text-decoration:none;opacity:.68;transition:opacity .2s}
.par-stratema:hover{opacity:1}
.par-stratema img{height:19px;width:auto;display:block}

@media(prefers-reduced-motion:reduce){
  .anim,.rec{animation:none}
  .btn,.onglet{transition:none}
}