/* ══════════════════════════════════════════════════════════════════
   CONTIAX — feuille de style de l'application
   Charte Indusiax : fond #0b0d12, police Outfit.
   Couleur produit Contiax : #10B981 (cinquième couleur de la suite,
   aux côtés de Stator #E84C2B, Rotor #3B82F6, Vector #A78BFA,
   Flux #0EA5E9).
   ══════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Outfit';
  src:url('/assets/fonts/outfit-1.woff2') format('woff2');
  font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122;
}
@font-face{
  font-family:'Outfit';
  src:url('/assets/fonts/outfit-0.woff2') format('woff2');
  font-weight:100 900;font-display:swap;
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0;
}

:root{
  --bg:#0b0d12; --bg2:#12151d; --bg3:#191d28;
  --txt:#f4f5f7; --mut:rgba(255,255,255,.58); --mut2:rgba(255,255,255,.38);
  --bord:rgba(255,255,255,.09);
  --acc:#10B981; --acc-soft:rgba(16,185,129,.12); --acc-vif:#34d399;
  --indusiax:#E84C2B;
  --danger:#f87171;
  --barre-h:62px;
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0;}

/* `hidden` doit toujours l'emporter.
   Le navigateur masque un élément portant cet attribut par une règle
   `display:none` de faible priorité : n'importe quelle règle d'auteur qui
   définit `display` sur ce même élément — ici `.vue{display:flex}` — la
   supplante et le rend de nouveau visible. Le défaut est sournois : le
   code JavaScript pose bien l'attribut, une inspection le confirme, et
   l'écran affiche pourtant tout en même temps. */
[hidden]{display:none !important;}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);color:var(--txt);
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  min-height:100dvh;overflow-x:hidden;
  padding-bottom:calc(var(--barre-h) + env(safe-area-inset-bottom));
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(56rem 34rem at 50% -14%, rgba(16,185,129,.12), transparent 62%);
}
a{color:inherit;text-decoration:none;}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;}
button{cursor:pointer;border:none;background:none;}
::selection{background:var(--acc);color:#04150f;}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px;}

/* ── Bandeau hors ligne ─────────────────────────────────────────── */
#bandeau-hors-ligne{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:7px 12px;background:#7c2d12;color:#fed7aa;
  font-size:.83rem;font-weight:600;
}
#bandeau-hors-ligne .point{width:7px;height:7px;border-radius:50%;background:#fdba74;}

/* ── En-tête ────────────────────────────────────────────────────── */
.entete{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px;max-width:720px;margin:0 auto;
}
.marque{display:inline-flex;align-items:center;gap:9px;font-weight:750;letter-spacing:-.01em;}
.marque b{color:var(--acc);}
#selecteur-langue{
  background:var(--bg2);border:1px solid var(--bord);border-radius:9px;
  padding:6px 9px;font-size:.85rem;color:var(--mut);
}

/* ── Vues ───────────────────────────────────────────────────────── */
main{max-width:720px;margin:0 auto;padding:0 20px 28px;}
.vue{display:flex;flex-direction:column;animation:apparait .25s ease;}
@keyframes apparait{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.vue{animation:none;}}

h2{font-size:1.5rem;font-weight:750;letter-spacing:-.02em;margin-bottom:6px;}
h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);margin-bottom:10px;}
.signature{font-size:1.28rem;font-weight:650;text-align:center;margin-top:14px;}
.promesse{color:var(--mut);text-align:center;margin:8px auto 0;max-width:30rem;}
.sous-titre{color:var(--mut);margin-bottom:14px;}
.detail{color:var(--mut2);font-size:.85rem;margin-top:8px;}

/* ── Accueil ────────────────────────────────────────────────────── */
#vue-accueil{align-items:center;padding-top:8px;}
.bouton-scanner{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  width:min(280px,78vw);aspect-ratio:1;margin:34px auto 26px;
  border-radius:28px;cursor:pointer;
  background:linear-gradient(155deg, rgba(16,185,129,.17), rgba(16,185,129,.05));
  border:1.5px solid rgba(16,185,129,.34);
  color:var(--acc-vif);font-size:1.1rem;font-weight:650;
  box-shadow:0 18px 46px -22px rgba(16,185,129,.6);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),border-color .22s,box-shadow .22s;
}
.bouton-scanner:hover{border-color:var(--acc);transform:translateY(-3px);
  box-shadow:0 24px 58px -22px rgba(16,185,129,.75);}
.bouton-scanner:active{transform:scale(.97);}
@media(prefers-reduced-motion:reduce){.bouton-scanner{transition:none;}
  .bouton-scanner:hover,.bouton-scanner:active{transform:none;}}
.compteur{font-weight:600;text-align:center;}
.mention-locale{color:var(--mut2);font-size:.84rem;text-align:center;margin-top:5px;}
/* Cliquable : c'est le recours si la reprise automatique n'a pas eu lieu. */
.en-attente{
  margin-top:14px;padding:11px 17px;border-radius:999px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(232,76,43,.13);border:1px solid rgba(232,76,43,.3);
  color:#fca98f;font-size:.85rem;font-weight:600;cursor:pointer;
  transition:background-color .2s,border-color .2s;
}
.en-attente:hover{background:rgba(232,76,43,.2);border-color:rgba(232,76,43,.5);}
.en-attente.en-cours{
  background:var(--acc-soft);border-color:rgba(16,185,129,.35);color:var(--acc-vif);
  cursor:default;pointer-events:none;
}
@media(prefers-reduced-motion:no-preference){
  .en-attente.en-cours{animation:respire 1.6s ease-in-out infinite;}
  @keyframes respire{50%{opacity:.62;}}
}

/* ── Capture ────────────────────────────────────────────────────── */
.apercus{display:flex;flex-direction:column;gap:12px;margin:18px 0 14px;}
.apercu{position:relative;border-radius:15px;overflow:hidden;border:1px solid var(--bord);background:var(--bg2);}
.apercu img{display:block;width:100%;max-height:44vh;object-fit:contain;background:#000;}
.apercu figcaption{
  position:absolute;top:9px;left:9px;padding:3px 10px;border-radius:999px;
  background:rgba(11,13,18,.78);font-size:.75rem;font-weight:600;color:var(--mut);
}
.apercu .retirer{
  position:absolute;top:7px;right:7px;width:29px;height:29px;border-radius:50%;
  background:rgba(11,13,18,.8);color:var(--txt);font-size:1.15rem;line-height:1;
}
.conseil{color:var(--mut2);font-size:.85rem;text-align:center;margin-bottom:16px;}

/* ── Boutons ────────────────────────────────────────────────────── */
.actions{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.actions.collees{position:sticky;bottom:12px;padding-top:10px;
  background:linear-gradient(to top,var(--bg) 62%,transparent);}
.btn{
  display:flex;align-items:center;justify-content:center;
  padding:14px 22px;border-radius:13px;font-weight:650;font-size:1rem;
  border:1px solid transparent;text-align:center;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),background-color .2s,border-color .2s;
}
.btn:active{transform:scale(.975);}
.btn-accent{background:var(--acc);color:#04150f;}
.btn-accent:hover{background:var(--acc-vif);}
.btn-fantome{border-color:var(--bord);background:var(--bg2);}
.btn-fantome:hover{border-color:rgba(16,185,129,.4);}
.btn-discret{color:var(--mut);}
.btn-discret:hover{color:var(--txt);}
.btn-danger{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.32);color:var(--danger);
  padding:12px 20px;border-radius:11px;font-weight:600;width:100%;}
.btn-danger:hover{background:rgba(248,113,113,.2);}
.btn-lien{color:var(--acc);font-size:.88rem;font-weight:600;padding:10px 0;align-self:flex-start;}
.btn-petit{
  /* 44 px de haut : l'outil s'utilise debout, souvent d'une seule main.
     Une cible plus petite se manque. */
  min-height:44px;padding:9px 16px;border-radius:11px;font-size:.85rem;font-weight:600;
  background:var(--bg2);border:1px solid var(--bord);color:var(--mut);
}
.btn-petit:hover{border-color:rgba(16,185,129,.4);color:var(--txt);}
@media(prefers-reduced-motion:reduce){.btn{transition:none;}.btn:active{transform:none;}}

/* ── Chargement ─────────────────────────────────────────────────── */
#vue-chargement{align-items:center;justify-content:center;min-height:56vh;}
.scanner-anime{position:relative;width:150px;height:96px;margin-bottom:26px;}
.carte-fantome{
  position:absolute;inset:0;border-radius:11px;
  background:var(--bg2);border:1px solid var(--bord);overflow:hidden;
}
.carte-fantome::before,.carte-fantome::after{
  content:"";position:absolute;left:16px;height:7px;border-radius:4px;
  background:rgba(255,255,255,.12);
}
.carte-fantome::before{top:26px;width:62%;}
.carte-fantome::after{top:44px;width:42%;}
.scanner-anime .balayage{
  position:absolute;left:6px;right:6px;top:50%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--acc),transparent);
  box-shadow:0 0 15px 2px rgba(16,185,129,.6);
}
@media(prefers-reduced-motion:no-preference){
  .scanner-anime .balayage{animation:balaye 1.9s cubic-bezier(.65,0,.35,1) infinite;}
  @keyframes balaye{0%,100%{transform:translateY(-38px);opacity:.25;}50%{transform:translateY(38px);opacity:1;}}
}

/* ── Fiche ──────────────────────────────────────────────────────── */
.confiance{
  align-self:flex-start;padding:5px 13px;border-radius:999px;
  font-size:.79rem;font-weight:650;margin-bottom:16px;
}
.confiance.haute{background:var(--acc-soft);color:var(--acc-vif);border:1px solid rgba(16,185,129,.3);}
.confiance.moyenne{background:rgba(251,191,36,.12);color:#fcd34d;border:1px solid rgba(251,191,36,.3);}
.confiance.basse{background:rgba(248,113,113,.12);color:var(--danger);border:1px solid rgba(248,113,113,.3);}

.date-enregistrement{color:var(--mut2);font-size:.8rem;margin:-8px 0 14px;}
#formulaire-fiche{display:flex;flex-direction:column;gap:11px;}
.ligne-champ{display:flex;flex-direction:column;gap:5px;}
.ligne-champ span{font-size:.76rem;font-weight:650;color:var(--mut);
  text-transform:uppercase;letter-spacing:.05em;}
.ligne-champ input,.ligne-champ textarea{
  width:100%;padding:12px 14px;border-radius:11px;
  background:var(--bg2);border:1px solid var(--bord);
  font-size:1rem;resize:vertical;
}
.ligne-champ input:focus,.ligne-champ textarea:focus{
  border-color:rgba(16,185,129,.5);outline:none;background:var(--bg3);
}

/* ── Succès ─────────────────────────────────────────────────────── */
#vue-succes{align-items:center;text-align:center;padding-top:34px;}
.coche{
  width:66px;height:66px;border-radius:50%;margin-bottom:20px;
  display:flex;align-items:center;justify-content:center;
  background:var(--acc-soft);border:1.5px solid rgba(16,185,129,.4);color:var(--acc-vif);
}
@media(prefers-reduced-motion:no-preference){
  .coche{animation:surgit-coche .45s cubic-bezier(.34,1.56,.64,1);}
  /* La coche est purement décorative : si l'animation ne se joue pas, rien
     n'est compromis. */
  @keyframes surgit-coche{from{transform:scale(.5);opacity:0;}to{transform:none;opacity:1;}}

  /* Une animation d'apparition ne doit jamais partir d'un état qui rendrait
     l'élément inutilisable si elle ne se jouait pas : onglet en arrière-plan,
     page non composée, économie d'énergie. Partir de `scale(.5)` réduisait
     une fenêtre de moitié — et elle y restait. D'où ce point de départ
     volontairement proche de la taille finale. */
  @keyframes surgit{from{transform:scale(.94) translateY(8px);opacity:0;}
                    to{transform:none;opacity:1;}}
}
.detail-envoi{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:12px;padding:6px 14px;border-radius:999px;
  background:var(--acc-soft);border:1px solid rgba(16,185,129,.26);
  color:var(--acc-vif);font-size:.82rem;font-weight:600;
}
.detail-envoi::before{
  content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--acc);
}
#vue-succes .actions{width:100%;max-width:340px;}
.promotion{margin-top:34px;color:var(--mut2);font-size:.87rem;}
.promotion a{color:var(--indusiax);font-weight:650;border-bottom:1px solid transparent;}
.promotion a:hover{border-bottom-color:var(--indusiax);}
.promotion small{display:inline-block;margin-top:5px;font-size:.8rem;color:var(--mut2);}

/* Une lueur traverse la mention en continu. Elle passe PAR-DESSUS le texte
   plutôt que de le colorer : le nom Indusiax garde ainsi sa couleur de
   marque, et le lien reste cliquable (`pointer-events:none`). */
.promotion .lueur{position:relative;display:inline-block;overflow:hidden;padding:2px 0;}
.promotion .lueur::after{
  content:"";position:absolute;top:0;bottom:0;left:-45%;width:32%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);pointer-events:none;
}
@media(prefers-reduced-motion:no-preference){
  .promotion .lueur::after{animation:lueurDefile 4.2s ease-in-out infinite;}
  @keyframes lueurDefile{
    0%{left:-45%;}
    45%{left:118%;}
    100%{left:118%;}
  }
}

/* ── Carnet ─────────────────────────────────────────────────────── */
.entete-carnet{display:flex;align-items:center;gap:8px;justify-content:space-between;}
.titre-carnet{display:flex;align-items:baseline;flex-wrap:wrap;gap:7px;min-width:0;}
/* Sur un écran étroit, le titre cède quelques points pour que la mention
   et les deux outils tiennent sur la même ligne. */
@media(max-width:420px){
  #vue-carnet h2{font-size:1.32rem;}
  .jeton-local{padding:3px 9px;font-size:.68rem;}
}
.outils-carnet{display:flex;gap:5px;flex-shrink:0;}
.btn-outil{
  width:40px;height:40px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg2);border:1px solid var(--bord);color:var(--mut);
  transition:color .2s,border-color .2s,background-color .2s;
}
.btn-outil:hover{color:var(--txt);border-color:rgba(16,185,129,.4);}
.btn-outil.actif{color:var(--acc-vif);border-color:rgba(16,185,129,.5);background:var(--acc-soft);}
.jeton-local{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:999px;
  background:var(--acc-soft);border:1px solid rgba(16,185,129,.26);
  color:var(--acc-vif);font-size:.72rem;font-weight:650;white-space:nowrap;
}
.jeton-local::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--acc);flex-shrink:0;
}

/* La recherche se déplie plutôt que d'occuper la place en permanence :
   sur un carnet de salon, on cherche rarement, on parcourt souvent. */
.zone-recherche{overflow:hidden;}
@media(prefers-reduced-motion:no-preference){
  .zone-recherche{animation:deplie .24s cubic-bezier(.34,1.3,.64,1);}
  @keyframes deplie{from{opacity:0;max-height:0;}to{opacity:1;max-height:80px;}}
}
.champ-recherche{
  width:100%;padding:12px 15px;margin:12px 0 4px;border-radius:12px;
  background:var(--bg2);border:1px solid var(--bord);
}
.champ-recherche:focus{border-color:rgba(16,185,129,.45);outline:none;}

/* Lignes resserrées : sur un carnet de salon, on veut en voir beaucoup
   d'un coup d'œil. */
.liste-contacts{list-style:none;display:flex;flex-direction:column;gap:6px;}
.contact{
  display:flex;align-items:center;gap:12px;
  padding:9px 12px;border-radius:12px;
  background:var(--bg2);border:1px solid var(--bord);
  transition:border-color .2s,background-color .2s;
}
.contact:hover{border-color:rgba(16,185,129,.32);background:var(--bg3);}
@media(prefers-reduced-motion:no-preference){
  .contact{animation:entreEnListe .34s cubic-bezier(.34,1.4,.64,1) backwards;}
  @keyframes entreEnListe{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}
}

/* Les initiales, dans un dégradé vert : de la couleur, et un repère
   visuel pour retrouver quelqu'un dans une longue liste. */
.pastille-initiales{
  flex-shrink:0;width:38px;height:38px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,rgba(16,185,129,.9),rgba(5,150,105,.75));
  color:#04150f;font-weight:750;font-size:.86rem;letter-spacing:.01em;
  box-shadow:0 5px 14px -6px rgba(16,185,129,.7);
  transition:transform .25s cubic-bezier(.34,1.5,.64,1),box-shadow .25s;
}
.contact:hover .pastille-initiales{
  transform:scale(1.07) rotate(-3deg);
  box-shadow:0 7px 20px -6px rgba(16,185,129,.9);
}
.contact-infos{flex:1;min-width:0;}
.contact-nom{
  font-weight:650;font-size:.97rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Le patronyme en capitales, comme dans un annuaire : c'est de
   l'affichage seulement — la donnée reste correctement casée pour la
   fiche contact et pour votre CRM. */
.contact-famille{text-transform:uppercase;}
.contact-societe{color:var(--mut2);font-weight:500;}

/* La ligne s'enfonce légèrement sous le doigt. */
.contact:active{transform:scale(.992);}
@media(prefers-reduced-motion:reduce){.contact:active{transform:none;}}

/* Suppression : la ligne s'efface en glissant au lieu de disparaître
   sèchement, pour qu'on voie ce qui part. */
.contact.part{
  animation:sortDeListe .28s cubic-bezier(.4,0,1,1) forwards;
  pointer-events:none;
}
@keyframes sortDeListe{
  to{opacity:0;transform:translateX(-26px);max-height:0;
     padding-top:0;padding-bottom:0;margin-bottom:-6px;}
}
.contact-detail{
  font-size:.82rem;color:var(--mut);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.btn-menu{
  flex-shrink:0;width:40px;height:40px;border-radius:10px;color:var(--mut2);
  display:flex;align-items:center;justify-content:center;
  transition:background-color .18s,color .18s;
}
.btn-menu:hover{background:var(--bg2);color:var(--txt);}
.vide{color:var(--mut2);text-align:center;padding:44px 20px;}

/* ── Feuilles d'actions ─────────────────────────────────────────── */
/* Double classe : la règle générale `.voile` est déclarée plus bas dans le
   fichier et l'emporterait à spécificité égale. */
.voile.voile-bas{place-items:end center;padding:0;}
.feuille{
  width:100%;max-width:520px;
  background:var(--bg2);border:1px solid var(--bord);border-bottom:none;
  border-radius:20px 20px 0 0;padding:10px 10px calc(14px + env(safe-area-inset-bottom));
  box-shadow:0 -18px 50px -16px rgba(0,0,0,.75);
}
@media(prefers-reduced-motion:no-preference){
  /* Aucune translation : une animation qui déplace un élément hors de sa
     position finale le laisse déplacé si elle ne se joue pas — la feuille
     dépassait du bas de l'écran. Deuxième fois que ce piège se présente ;
     la règle vaut pour toute animation d'apparition du projet. */
  .feuille{animation:monteFeuille .26s cubic-bezier(.34,1.4,.64,1);}
  @keyframes monteFeuille{from{opacity:0;transform:scale(.985);}to{opacity:1;transform:none;}}
}
.feuille-titre{
  font-weight:700;font-size:1rem;text-align:center;
  padding:12px 12px 6px;
}
.feuille-detail{
  color:var(--mut2);font-size:.85rem;text-align:center;padding:0 14px 10px;
}
.ligne-action{
  width:100%;display:flex;align-items:center;gap:13px;
  padding:14px 16px;border-radius:13px;min-height:52px;
  font-size:.98rem;font-weight:600;color:var(--txt);text-align:left;
  transition:background-color .16s;
}
.ligne-action svg{color:var(--acc);flex-shrink:0;}
.ligne-action:hover{background:var(--bg3);}
.ligne-action.danger{color:var(--danger);}
.ligne-action.danger svg{color:var(--danger);}
.ligne-action.danger:hover{background:rgba(248,113,113,.12);}
.ligne-action.neutre{
  justify-content:center;color:var(--mut);margin-top:4px;
  border-top:1px solid var(--bord);border-radius:0 0 13px 13px;
}

/* ── Réglages ───────────────────────────────────────────────────── */
.bloc{
  background:var(--bg2);border:1px solid var(--bord);border-radius:14px;
  padding:17px;margin-top:14px;
}
.promesses{list-style:none;display:flex;flex-direction:column;gap:9px;}
.promesses li{display:flex;align-items:flex-start;gap:9px;font-size:.92rem;color:var(--mut);}
.promesses li::before{
  content:"";flex-shrink:0;width:15px;height:15px;margin-top:4px;border-radius:50%;
  background:var(--acc-soft);border:1px solid rgba(16,185,129,.45);
}
/* ── Réglages : destinations de sortie ──────────────────────────── */
.repli{border-top:1px solid var(--bord);padding:12px 0;}
.repli:first-of-type{border-top:none;padding-top:0;}
.repli summary{
  cursor:pointer;font-weight:650;font-size:.95rem;padding:6px 0;
  list-style:none;display:flex;align-items:center;gap:8px;
}
.repli summary::-webkit-details-marker{display:none;}
.repli summary::before{
  content:"›";color:var(--acc);font-size:1.3rem;line-height:1;
  transition:transform .2s;display:inline-block;
}
.repli[open] summary::before{transform:rotate(90deg);}
.repli .ligne-champ{margin-top:11px;}
.repli .btn-petit{margin-top:12px;width:100%;}
.bascule{
  display:flex;align-items:flex-start;gap:10px;margin-top:13px;
  font-size:.89rem;color:var(--mut);cursor:pointer;
}
.bascule input{
  flex-shrink:0;width:19px;height:19px;margin-top:1px;
  accent-color:var(--acc);cursor:pointer;
}

.bloc.liens{display:flex;flex-wrap:wrap;gap:16px;}
.bloc.liens a{color:var(--mut);font-size:.88rem;border-bottom:1px solid transparent;}
.bloc.liens a:hover{color:var(--txt);border-bottom-color:var(--acc);}
.version{text-align:center;color:var(--mut2);font-size:.76rem;margin-top:22px;}

/* ── Barre de navigation ────────────────────────────────────────── */
.barre{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  display:flex;
  background:rgba(11,13,18,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--bord);
  padding-bottom:env(safe-area-inset-bottom);
}
.onglet{
  flex:1;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:var(--barre-h);color:var(--mut2);font-size:.72rem;font-weight:600;
  transition:color .18s;
}
.onglet.actif{color:var(--acc);}
.onglet:hover{color:var(--txt);}
.onglet.actif:hover{color:var(--acc-vif);}
.pastille{
  position:absolute;top:8px;left:calc(50% + 7px);
  min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:var(--acc);color:#04150f;
  font-size:.65rem;font-weight:750;font-style:normal;line-height:17px;text-align:center;
}

/* Choisir une image déjà prise : possible, mais discret — le geste
   courant est de photographier la carte qu'on a en main. */
.lien-galerie{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 18px;margin-top:-8px;
  color:var(--mut);font-size:.88rem;font-weight:600;cursor:pointer;
  border-radius:11px;transition:color .2s,background-color .2s;
}
.lien-galerie:hover{color:var(--txt);background:var(--bg2);}
.lien-galerie svg{opacity:.7;}
#label-verso-galerie{align-self:center;margin-top:0;}

/* ── Partage ────────────────────────────────────────────────────── */
.bloc-partage{text-align:center;}
.bloc-partage h3{text-align:left;}
.bloc-partage .detail{text-align:left;margin-bottom:16px;}
.bloc-partage .cadre-qr{width:min(210px,64vw);}
.bloc-partage .adresse-partage{margin-top:12px;}
.actions-partage{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:16px;}
.actions-partage .btn-petit{flex:1;min-width:140px;}

.btn-partage{
  display:inline-flex;align-items:center;gap:9px;margin-top:26px;
  padding:11px 20px;border-radius:999px;
  background:var(--bg2);border:1px solid var(--bord);color:var(--mut);
  font-size:.9rem;font-weight:600;min-height:44px;
  transition:border-color .2s,color .2s;
}
.btn-partage:hover{border-color:rgba(16,185,129,.42);color:var(--txt);}

/* ── Fenêtres superposées ───────────────────────────────────────── */
/* Centrage par grille plutôt que par boîte flexible : en flex, la fenêtre
   est un élément que le navigateur peut contracter sous sa largeur demandée,
   ce qui la réduisait ici de moitié. Une grille ne contracte pas. */
.voile{
  position:fixed;inset:0;z-index:80;
  display:grid;place-items:center;padding:20px;
  background:rgba(4,6,10,.78);backdrop-filter:blur(6px);
  overflow-y:auto;
}
.modale{
  position:relative;width:100%;max-width:400px;
  background:var(--bg2);border:1px solid var(--bord);border-radius:19px;
  padding:26px 22px 22px;text-align:center;
  box-shadow:0 26px 70px -20px rgba(0,0,0,.8);
}
@media(prefers-reduced-motion:no-preference){
  .modale{animation:surgit .28s cubic-bezier(.34,1.56,.64,1);}
}
.modale h2{font-size:1.28rem;margin-bottom:8px;}
.modale .promesse{margin-bottom:20px;font-size:.94rem;}
.modale .actions{margin-top:20px;}
.modale form{display:flex;flex-direction:column;gap:14px;text-align:left;}
.modale .ligne-champ input{font-size:16px;} /* évite le zoom automatique sur iOS */
.modale .detail{text-align:center;margin-top:16px;}
.fermer{
  position:absolute;top:9px;right:9px;
  width:40px;height:40px;border-radius:10px;
  font-size:1.5rem;line-height:1;color:var(--mut2);
}
.fermer:hover{background:var(--bg3);color:var(--txt);}

/* Le code doit être flashé par un autre téléphone, souvent à bout de bras :
   plus il est grand, plus la lecture est immédiate. */
.cadre-qr{
  background:#fff;border-radius:15px;padding:15px;
  width:min(300px,80vw);margin:0 auto;
  box-shadow:0 8px 26px -10px rgba(0,0,0,.6);
}
.cadre-qr img{display:block;width:100%;height:auto;}
.adresse-partage{
  margin-top:14px;font-weight:650;font-size:.95rem;color:var(--acc-vif);
  letter-spacing:.01em;
}

/* ── Alerte ─────────────────────────────────────────────────────── */
.alerte{
  position:fixed;left:14px;right:14px;z-index:70;
  bottom:calc(var(--barre-h) + env(safe-area-inset-bottom) + 14px);
  max-width:520px;margin:0 auto;
  padding:13px 17px;border-radius:13px;
  background:var(--bg3);border:1px solid rgba(232,76,43,.4);
  color:var(--txt);font-size:.9rem;
  box-shadow:0 14px 40px -12px rgba(0,0,0,.7);
}
@media(prefers-reduced-motion:no-preference){
  .alerte{animation:monte .3s cubic-bezier(.34,1.56,.64,1);}
  @keyframes monte{from{transform:translateY(14px);opacity:0;}to{transform:none;opacity:1;}}
}

@media(min-width:640px){
  .bouton-scanner{width:250px;}
  .actions{flex-direction:row;justify-content:center;}
  .actions .btn{min-width:190px;}
  .actions.collees{flex-direction:row-reverse;}
}