/* ═══════════════════════════════════════════════════════════════════════════
   L AUDIT, SA SEULE FEUILLE DE STYLE.

   ELLE EXISTE PARCE QUE L AUDIT SE MONTE MAINTENANT A DEUX ENDROITS : la page
   /audit, qui est ce qu un moteur de recherche indexe, et le panneau du globe,
   qui est ce qu un lecteur ouvre quand il est deja chez nous. Le meme outil,
   pas deux copies : une copie divergerait au premier correctif, et c est
   exactement la difference qu on ressent quand un site « sort de lui-meme ».

   TOUT EST PREFIXE au-. Le panneau du globe a deja son propre vocabulaire
   (.fiche, .k, .an, .source...) et la page a le sien ; sans prefixe, monter
   l audit dans le globe repeindrait des morceaux du globe.

   LES COULEURS, LES FAMILLES ET LES RAYONS NE SONT PAS ICI. Ils viennent de
   assets/keepr.css, le socle, qui est aussi ce que la fiche d elevage inline.
   Cette feuille ne decrit que la FORME de l audit.

   DEUX MODIFICATEURS SUR LA RACINE, ET ILS NE CHANGENT QUE L ENCADREMENT :
     .au.page      les trois etapes sont des cartes numerotees, en pleine page
     .au.panneau   les trois etapes coulent dans une colonne etroite deja
                   encadree par le panneau du globe
   Le contenu des etapes est identique dans les deux cas — c est la promesse.
   ═══════════════════════════════════════════════════════════════════════════ */

.au{--au-vert:#9FBA8F;--au-ambre:#F0C36D;--au-terre:#D08F6A}

/* ── LES TROIS ETAPES ─────────────────────────────────────────────────────── */
/* scroll-margin-top : la barre du haut de /audit est collante et haute de 71px.
   Sans cette marge, tout scrollIntoView depose sa cible DERRIERE elle — sur
   cette page c etait le titre du verdict, c est-a-dire le resultat de l action
   principale, qui disparaissait au moment ou on le demandait. */
.au-etape{scroll-margin-top:88px}
.au-etape.off{opacity:.42;pointer-events:none}
.au.page .au-etape{margin-bottom:20px;border:1px solid var(--ligne);border-radius:var(--r-carte);
  background:var(--verre);-webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);box-shadow:inset 0 1px 0 var(--verre-hi);padding:26px 28px}
.au.panneau .au-etape{margin-bottom:18px;padding:0 0 18px;border-bottom:1px solid var(--ligne)}
.au.panneau .au-etape:last-of-type{border-bottom:0;padding-bottom:0}

.au-no{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.au-no i{width:24px;height:24px;border-radius:50%;border:1px solid var(--ligne-fort);color:var(--vif);
  font:700 12px var(--fd);display:flex;align-items:center;justify-content:center;flex:none;font-style:normal}
.au-no h2{font-family:var(--fd);font-weight:700;letter-spacing:-.018em;font-size:18px}
.au.panneau .au-no{margin-bottom:13px}
.au.panneau .au-no h2{font-size:15px}
.au.panneau .au-no i{width:20px;height:20px;font-size:10.5px}

/* ── LE CHOIX DE L ESPECE ─────────────────────────────────────────────────── */
.au-srch{scroll-margin-top:88px;display:flex;align-items:center;gap:11px;background:rgba(10,12,9,.6);
  border:1px solid var(--ligne);border-radius:var(--r-commande);padding:13px 15px;transition:border-color .3s}
.au-srch:focus-within{border-color:var(--ligne-fort)}
.au-srch svg{width:16px;height:16px;stroke:var(--vif);fill:none;stroke-width:2;flex:none}
.au-srch input{flex:1;border:0;outline:0;background:transparent;font:500 15.5px var(--fb);min-width:0;color:inherit}
.au-srch input::placeholder{color:var(--brume)}
.au-res{margin-top:10px;max-height:290px;overflow:auto;display:flex;flex-direction:column;gap:5px}
.au.panneau .au-res{max-height:232px}
.au-res button{display:flex;align-items:baseline;gap:11px;text-align:left;padding:10px 13px;
  border-radius:var(--r-commande);border:1px solid transparent;background:none;cursor:pointer;color:inherit;
  font-family:inherit;transition:background .2s,border-color .2s}
.au-res button:hover,.au-res button:focus-visible{background:rgba(var(--ac-rgb),.09);border-color:var(--ligne)}
.au-res b{font:600 14.5px var(--fb)}
.au-res i{font:italic 500 12.5px var(--fb);color:var(--brume);flex:1}
.au-vide{padding:16px;color:var(--brume);font:500 13.5px var(--fb)}
.au-tag{font:600 9px var(--fb);letter-spacing:.09em;text-transform:uppercase;border:1px solid var(--ligne);
  border-radius:var(--r-puce);padding:3px 6px;color:var(--brume);flex:none}
.au-tag.or{color:var(--vif-clair);border-color:rgba(var(--ac-clair-rgb),.32)}
.au-choisi{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.au-choisi .qui b{font:700 21px var(--fd);display:block;line-height:1.2}
.au-choisi .qui i{font:italic 500 13.5px var(--fb);color:var(--brume)}
.au.panneau .au-choisi .qui b{font-size:17px}
.au-chg{margin-left:auto;font:600 11px var(--fb);letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--ligne);border-radius:var(--r-commande);padding:8px 13px;color:var(--texte);
  background:none;cursor:pointer}
.au-portee{margin-top:16px;font:500 13px var(--fb);color:var(--brume)}
.au-portee b{color:var(--texte);font-weight:600}

/* ── LE FORMULAIRE ────────────────────────────────────────────────────────── */
/* Il ne demande QUE ce que la fiche peut juger, et ne montre jamais la cible
   avant le verdict : un champ pre-rempli avec la bonne reponse ne mesure plus
   rien. */
/* minmax(0,...) ET PAS 1fr NU, sur les deux axes de cette grille et sur celle
   du verdict plus bas. Un 1fr vaut minmax(auto,1fr), dont le minimum est le
   min-content de la colonne — ici un libelle comme « ENCLOSURE FLOOR, WIDTH ×
   DEPTH ». Dans le panneau du globe, large de 350 px, ces libelles poussaient
   la grille au-dela du panneau et la moitie des champs sortait de l ecran par
   la droite, sans barre de defilement pour le dire. */
.au-champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:14px}
.au.panneau .au-champs{grid-template-columns:minmax(0,1fr);gap:12px}
.au-f{display:flex;flex-direction:column;gap:7px;min-width:0}
.au-f label{font:600 11px var(--fb);letter-spacing:.1em;text-transform:uppercase;color:var(--brume)}
.au-f .boite{display:flex;align-items:center;gap:8px;background:rgba(10,12,9,.6);border:1px solid var(--ligne);
  border-radius:var(--r-commande);padding:11px 13px;transition:border-color .3s}
.au-f .boite:focus-within{border-color:var(--ligne-fort)}
.au-f input{flex:1;border:0;outline:0;background:transparent;font:600 15px var(--fb);min-width:0;
  color:inherit;font-variant-numeric:tabular-nums}
.au-f input::-webkit-outer-spin-button,.au-f input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.au-f input[type=number]{-moz-appearance:textfield}
.au-f .u,.au-f .x{font:600 12.5px var(--fb);color:var(--brume);flex:none}
.au-seg{display:flex;gap:6px}
.au-seg button{flex:1;border:1px solid var(--ligne);border-radius:var(--r-commande);padding:11px 8px;
  font:600 13px var(--fb);color:var(--texte);background:none;cursor:pointer;transition:all .3s var(--ease)}
.au-seg button.on{background:var(--vif);border-color:var(--vif);color:#0A1400}
.au-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:8px;margin-top:16px}
.au.panneau .au-cases{grid-template-columns:minmax(0,1fr)}
.au-ck,.au-cases .au-titre{min-width:0}
.au-cases .au-titre{grid-column:1/-1;font:600 11px var(--fb);letter-spacing:.1em;text-transform:uppercase;
  color:var(--brume);margin-bottom:2px}
.au-ck{display:flex;align-items:center;gap:10px;border:1px solid var(--ligne);border-radius:var(--r-commande);
  padding:11px 13px;font:500 13.5px var(--fb);color:var(--texte);text-align:left;background:none;cursor:pointer;
  transition:all .3s var(--ease)}
.au-ck i{width:16px;height:16px;border-radius:var(--r-puce);border:1px solid var(--ligne-fort);flex:none;
  display:flex;align-items:center;justify-content:center;font-style:normal;font:700 11px var(--fd);color:#0A1400}
.au-ck.on{border-color:var(--ligne-fort);color:var(--ivoire)}
.au-ck.on i{background:var(--vif)}
.au-ck.on i::after{content:"\2713"}
.au-go{margin-top:22px;display:inline-flex;align-items:center;gap:11px;background:var(--vif);color:#0A1400;
  font:700 14px var(--fd);border-radius:var(--r-commande);padding:15px 26px;border:0;cursor:pointer;
  transition:transform .35s var(--ease),box-shadow .35s}
.au-go:hover{transform:translateY(-2px);box-shadow:0 15px 32px -14px rgba(var(--ac-rgb),.5)}
.au-go[disabled]{opacity:.4;pointer-events:none}
.au-go svg{width:15px;height:15px}
.au-hint{margin-top:12px;font:500 12.5px var(--fb);color:var(--brume)}

/* ── LE VERDICT ───────────────────────────────────────────────────────────── */
.au-out{display:none}
.au-out.on{display:block}
.au-tally{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.au-tal{border:1px solid var(--ligne);border-radius:var(--r-commande);padding:14px 18px;min-width:104px}
.au-tal b{display:block;font:700 27px var(--fd);line-height:1;font-variant-numeric:tabular-nums}
.au-tal span{font:600 9.5px var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--brume)}
.au-tal.ok b{color:var(--au-vert)} .au-tal.off b{color:var(--au-ambre)} .au-tal.miss b{color:var(--au-terre)}
.au.panneau .au-tal{padding:11px 14px;min-width:0;flex:1}
.au.panneau .au-tal b{font-size:22px}
/* align-items:start, sinon la grille etire les colonnes a hauteur egale et
   celle qui a deux constats trainait quatre cents pixels de vide a cote de
   celle qui en a six. Un verdict d audit n a aucune raison d etre carre. */
.au-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:14px;align-items:start}
.au.panneau .au-cols{grid-template-columns:minmax(0,1fr)}
.au-col{min-width:0}
.au-it b,.au-it .pq,.au-it .cit{overflow-wrap:anywhere}
.au-col{border:1px solid var(--ligne);border-radius:var(--r-carte);padding:20px 21px;background:rgba(13,15,13,.5)}
.au.panneau .au-col{padding:15px 16px}
.au-col h3{font:600 11px var(--fb);letter-spacing:.22em;text-transform:uppercase;margin-bottom:14px}
.au-col.ok h3{color:var(--au-vert)} .au-col.off h3{color:var(--au-ambre)} .au-col.miss h3{color:var(--au-terre)}
.au-it{padding:12px 0;border-top:1px solid rgba(240,235,223,.06)}
.au-it:first-of-type{border-top:0}
.au-it b{display:block;font:600 14.5px var(--fb)}
.au-it .cmp{display:flex;gap:8px;flex-wrap:wrap;margin-top:5px;font:600 12.5px var(--fb);
  font-variant-numeric:tabular-nums}
.au-it .toi{color:var(--ivoire)}
.au-it .fl{color:var(--brume)}
.au-it .cible{color:var(--vif-clair)}
.au-it .pq{margin-top:5px;font:500 12.5px var(--fb);color:var(--brume)}
.au-it .cit{margin-top:6px;font:500 11.5px var(--fb);color:var(--brume);border-left:2px solid var(--ligne);
  padding-left:9px}
.au-nonditH{margin-top:16px;border:1px dashed var(--ligne);border-radius:var(--r-commande);padding:16px 19px}
.au-nonditH h3{font:600 11px var(--fb);letter-spacing:.2em;text-transform:uppercase;color:var(--brume);
  margin-bottom:9px}
.au-nonditH p{font:500 13px var(--fb);color:var(--brume)}
.au-nonditH .l{color:var(--texte)}
.au-actes{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.au-actes a,.au-actes button{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--ligne-fort);
  border-radius:var(--r-commande);padding:13px 20px;font:600 13px var(--fb);color:var(--ivoire);
  background:none;cursor:pointer;text-decoration:none;transition:all .3s var(--ease)}
.au-actes a:hover,.au-actes button:hover{border-color:var(--vif-clair)}
.au-actes .prim{background:var(--vif);border-color:var(--vif);color:#0A1400;font-weight:700}
.au.panneau .au-actes a,.au.panneau .au-actes button{padding:10px 14px;font-size:12px}

/* ── LE MESSAGE FUGACE ────────────────────────────────────────────────────── */
.au-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,70px);z-index:80;
  background:rgba(15,17,14,.94);border:1px solid var(--ligne-fort);border-radius:var(--r-puce);padding:11px 21px;
  font:600 13px var(--fb);color:var(--ivoire);opacity:0;transition:all .45s var(--ease);pointer-events:none;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.au-toast.on{transform:translate(-50%,0);opacity:1}

@media(max-width:640px){.au.page .au-etape{padding:21px 19px}}
@media(prefers-reduced-motion:reduce){
  .au *,.au *::before,.au *::after{animation:none!important;transition:none!important}}