/* ══════════════════════════════════════════════════════════════════
   Cartes de visite NFC Indusiax — feuille de style unique.
   Charte Contiax : police Outfit, accent #10B981, fond sombre #0b0d12.

   Deux jeux de couleurs cohabitent, pour une raison de terrain. Les pages
   publiques s'ouvrent en plein salon, parfois dehors, sur un téléphone dont
   la luminosité est déjà au maximum : un fond sombre imposé y est moins
   lisible qu'un fond clair. Elles suivent donc la préférence du système,
   comme le demande le cahier des charges. Les pages de travail — espace de
   gestion, back-office — restent sur le sombre de la suite Indusiax, forcé
   par `data-theme="sombre"` sur la balise racine.
   ══════════════════════════════════════════════════════════════════ */

@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;
}

/* ── Palette claire (défaut des pages publiques) ─────────────────────
   Le vert n'est pas le #10B981 de Contiax mais une déclinaison plus
   sombre. Ce n'est pas un écart de charte, c'est ce qu'exige le fond
   clair : le vert de la suite, mesuré en blanc sur fond vert, donne
   3,8:1 — sous le seuil lisible de 4,5:1, sur le bouton le plus
   important de la page, consulté dehors sur un salon. Le #047857 rend
   5,6:1 avec le même blanc, et 5,2:1 en texte vert sur le fond clair.
   La teinte reste celle de la marque ; seule la luminosité descend. */
:root{
  --bg:#f7f8fa; --bg2:#ffffff; --bg3:#eef0f4;
  --txt:#12151d; --mut:rgba(18,21,29,.72); --mut2:rgba(18,21,29,.60);
  --bord:rgba(18,21,29,.13);
  --acc:#047857; --acc-soft:rgba(4,120,87,.10); --acc-vif:#065f46;
  --sur-acc:#ffffff;
  --indusiax:#c2410c;
  --danger:#b91c1c; --danger-soft:rgba(185,28,28,.08);
  --ombre:0 10px 30px -18px rgba(18,21,29,.5);
  color-scheme:light;
}

/* ── Palette sombre ──────────────────────────────────────────────── */
@media(prefers-color-scheme:dark){
  :root{
    --bg:#0b0d12; --bg2:#12151d; --bg3:#191d28;
    --txt:#f4f5f7; --mut:rgba(255,255,255,.66); --mut2:rgba(255,255,255,.50);
    --bord:rgba(255,255,255,.09);
    --acc:#10B981; --acc-soft:rgba(16,185,129,.12); --acc-vif:#34d399;
    --sur-acc:#04150f;
    --indusiax:#E84C2B;
    --danger:#f87171; --danger-soft:rgba(248,113,113,.12);
    --ombre:0 18px 46px -26px rgba(0,0,0,.9);
    color-scheme:dark;
  }
}

/* Pages de travail : le sombre, quelle que soit la préférence système. */
:root[data-theme="sombre"]{
  --bg:#0b0d12; --bg2:#12151d; --bg3:#191d28;
  --txt:#f4f5f7; --mut:rgba(255,255,255,.66); --mut2:rgba(255,255,255,.50);
  --bord:rgba(255,255,255,.09);
  --acc:#10B981; --acc-soft:rgba(16,185,129,.12); --acc-vif:#34d399;
  --sur-acc:#04150f;
  --indusiax:#E84C2B;
  --danger:#f87171; --danger-soft:rgba(248,113,113,.12);
  --ombre:0 18px 46px -26px rgba(0,0,0,.9);
  color-scheme:dark;
}

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

/* `hidden` doit toujours l'emporter : le navigateur le pose avec une
   priorité si faible que n'importe quelle règle d'auteur définissant
   `display` sur le même élément le rend de nouveau visible. Le défaut est
   sournois — l'attribut est bien présent dans l'inspecteur, et l'écran
   affiche pourtant tout à la fois. */
[hidden]{display:none !important;}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
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;
}
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;}
img{max-width:100%;}
::selection{background:var(--acc);color:var(--sur-acc);}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:8px;}

/* Zone de confort : sur un téléphone tenu d'une main, tout ce qui se
   touche doit faire au moins 44 px de haut. */
a.action,button,input[type=submit],label.bouton{min-height:44px;}

/* ── Structure ───────────────────────────────────────────────────── */
.enveloppe{max-width:520px;margin:0 auto;padding:22px 18px 40px;}
.enveloppe.large{max-width:940px;}
.pile{display:flex;flex-direction:column;gap:14px;}
.rangee{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.pousse{margin-left:auto;}

h1{font-size:1.62rem;font-weight:750;letter-spacing:-.025em;line-height:1.2;}
h2{font-size:1.24rem;font-weight:700;letter-spacing:-.015em;}
h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
   color:var(--mut);font-weight:650;}
p{color:var(--txt);}
.discret{color:var(--mut);}
.minuscule{font-size:.83rem;color:var(--mut2);}

/* ── Carte de visite ─────────────────────────────────────────────── */
.carte{
  background:var(--bg2);border:1px solid var(--bord);border-radius:22px;
  padding:26px 20px 20px;box-shadow:var(--ombre);position:relative;
}
.carte::before{
  content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;
  background:radial-gradient(30rem 12rem at 50% -30%,var(--acc-soft),transparent 70%);
}
.identite{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;}
.portrait,.initiales{
  width:112px;height:112px;border-radius:50%;margin-bottom:12px;
  border:2px solid var(--bord);object-fit:cover;display:block;
}
.initiales{
  display:flex;align-items:center;justify-content:center;
  background:var(--acc-soft);border-color:var(--acc);color:var(--acc);
  font-size:2.3rem;font-weight:700;letter-spacing:.02em;
}
.identite .nom{font-size:1.55rem;font-weight:750;letter-spacing:-.025em;line-height:1.15;}
.identite .poste{color:var(--txt);font-weight:600;}
.identite .poste + .poste{color:var(--mut);font-weight:500;font-size:.94rem;}
.identite .societe{color:var(--acc);font-weight:650;margin-top:2px;}

/* ── Actions principales ─────────────────────────────────────────── */
.actions{display:flex;gap:10px;margin:20px 0 6px;}
.action{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 16px;border-radius:14px;font-weight:650;font-size:.97rem;
  border:1px solid var(--bord);background:var(--bg3);color:var(--txt);
  transition:transform .16s ease,border-color .16s,background-color .16s;
}
.action.majeure{
  background:var(--acc);border-color:var(--acc);color:var(--sur-acc);
  box-shadow:0 12px 26px -16px var(--acc);
}
.action:hover{border-color:var(--acc);}
.action.majeure:hover{background:var(--acc-vif);border-color:var(--acc-vif);}
.action:active{transform:scale(.98);}
@media(prefers-reduced-motion:reduce){.action{transition:none;}
  .action:active{transform:none;}}
.action svg{width:18px;height:18px;flex:none;}

/* ── Coordonnées ─────────────────────────────────────────────────── */
.coordonnees{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:2px;}
.coordonnees li{border-top:1px solid var(--bord);}
.coordonnees li:first-child{border-top:none;}
.ligne{
  display:flex;align-items:center;gap:13px;padding:13px 4px;
  border-radius:12px;transition:background-color .15s;
}
.ligne:hover{background:var(--bg3);}
.ligne .pictogramme{
  width:38px;height:38px;flex:none;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:var(--acc-soft);color:var(--acc);
}
.ligne .pictogramme svg{width:19px;height:19px;}
.ligne .texte{min-width:0;flex:1;}
.ligne .etiquette{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--mut2);font-weight:650;}
.ligne .valeur{font-weight:600;overflow-wrap:anywhere;}
.ligne .fleche{color:var(--mut2);flex:none;}

/* ── Partage par QR ──────────────────────────────────────────────── */
.qr{margin-top:16px;border-top:1px solid var(--bord);padding-top:14px;}
.qr summary{
  cursor:pointer;color:var(--mut);font-weight:600;font-size:.9rem;
  list-style:none;display:flex;align-items:center;gap:8px;padding:6px 0;
}
.qr summary::-webkit-details-marker{display:none;}
.qr summary::before{content:"⌗";color:var(--acc);font-size:1.1rem;}
.qr .cadre{
  margin:12px auto 4px;padding:14px;width:max-content;border-radius:16px;
  background:var(--bg3);border:1px solid var(--bord);
}
/* Le code est servi par le serveur dans une balise <img> : les modules sont
   dessinés en clair, invisibles sur le fond clair d'un téléphone en mode
   jour. Le cadre porte donc toujours un fond sombre, quel que soit le thème. */
.qr .cadre{background:#12151d;border-color:rgba(255,255,255,.12);}
.qr .cadre img,.qr .cadre svg{width:172px;height:172px;display:block;}

/* ── Pied « Propulsé par Indusiax » ──────────────────────────────── */
.pied{margin-top:26px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:9px;}
.propulse{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;
  border-radius:999px;border:1px solid var(--bord);background:var(--bg2);
  font-size:.85rem;color:var(--mut);font-weight:600;
  transition:border-color .16s,color .16s;
}
.propulse:hover{border-color:var(--indusiax);color:var(--txt);}
.propulse b{color:var(--indusiax);font-weight:750;}
.logo-societe{max-height:46px;max-width:190px;object-fit:contain;opacity:.9;}
.liens-pied{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
  font-size:.78rem;color:var(--mut2);}
.liens-pied a:hover{color:var(--acc);}

/* ── Encadrés d'information ──────────────────────────────────────── */
.encadre{
  border:1px solid var(--bord);border-radius:16px;padding:15px 17px;
  background:var(--bg2);
}
.encadre.accent{border-color:var(--acc);background:var(--acc-soft);}
.encadre.alerte{border-color:var(--danger);background:var(--danger-soft);}
.encadre h3{margin-bottom:6px;}
.encadre p + p{margin-top:8px;}

.message{
  border-radius:13px;padding:11px 15px;font-weight:600;font-size:.93rem;
  border:1px solid var(--acc);background:var(--acc-soft);color:var(--txt);
}
.message.erreur{border-color:var(--danger);background:var(--danger-soft);}
.message ul{margin:6px 0 0 18px;font-weight:500;}

/* ── Formulaires ─────────────────────────────────────────────────── */
.champ{display:flex;flex-direction:column;gap:5px;}
.champ label{font-size:.79rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--mut);font-weight:650;}
.champ input,.champ textarea,.champ select{
  width:100%;padding:11px 13px;border-radius:12px;min-height:44px;
  background:var(--bg);border:1px solid var(--bord);color:var(--txt);
  transition:border-color .15s;
}
.champ input:focus,.champ textarea:focus,.champ select:focus{
  border-color:var(--acc);outline:none;
}
.champ textarea{min-height:96px;resize:vertical;}
.champ .aide{font-size:.79rem;color:var(--mut2);}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:520px){.duo{grid-template-columns:1fr;}}

.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:13px;font-weight:650;
  background:var(--acc);color:var(--sur-acc);border:1px solid var(--acc);
  transition:background-color .15s,transform .15s;
}
.bouton:hover{background:var(--acc-vif);border-color:var(--acc-vif);}
.bouton:active{transform:scale(.98);}
.bouton.discrete{background:var(--bg3);color:var(--txt);border-color:var(--bord);}
.bouton.discrete:hover{border-color:var(--acc);background:var(--bg3);}
.bouton.danger{background:transparent;color:var(--danger);border-color:var(--danger);}
.bouton.danger:hover{background:var(--danger-soft);}
.bouton.petit{padding:8px 13px;font-size:.85rem;min-height:38px;border-radius:10px;}
.bouton:disabled{opacity:.5;cursor:not-allowed;}

.case{display:flex;align-items:flex-start;gap:9px;cursor:pointer;
  font-weight:500;color:var(--txt);}
.case input{width:19px;height:19px;margin-top:2px;flex:none;accent-color:var(--acc);}

/* ── Espace de gestion et back-office ────────────────────────────── */
.entete-appli{
  border-bottom:1px solid var(--bord);background:var(--bg2);
  padding:13px 18px;position:sticky;top:0;z-index:20;
}
.entete-appli .dedans{max-width:940px;margin:0 auto;display:flex;
  align-items:center;gap:12px;flex-wrap:wrap;}
.marque{display:inline-flex;align-items:center;gap:9px;font-weight:750;
  letter-spacing:-.01em;}
.marque b{color:var(--acc);}
.marque .puce{width:9px;height:9px;border-radius:50%;background:var(--indusiax);}

.emplacement{
  border:1px solid var(--bord);border-radius:16px;background:var(--bg2);
  overflow:hidden;
}
.emplacement.vide{border-style:dashed;}
.emplacement > summary{
  cursor:pointer;padding:14px 16px;display:flex;align-items:center;gap:12px;
  list-style:none;
}
.emplacement > summary::-webkit-details-marker{display:none;}
.emplacement > summary:hover{background:var(--bg3);}
.emplacement[open] > summary{border-bottom:1px solid var(--bord);}
.emplacement .corps{padding:16px;display:flex;flex-direction:column;gap:13px;}
.vignette{
  width:44px;height:44px;border-radius:50%;flex:none;object-fit:cover;
  border:1px solid var(--bord);background:var(--bg3);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:var(--acc);font-size:1rem;
}
.resume{min-width:0;flex:1;}
.resume .titre{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.resume .sous{font-size:.83rem;color:var(--mut2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}

.etiquette{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  border:1px solid var(--bord);color:var(--mut);white-space:nowrap;
}
.etiquette.vive{border-color:var(--acc);color:var(--acc);background:var(--acc-soft);}
.etiquette.eteinte{border-color:var(--danger);color:var(--danger);background:var(--danger-soft);}
.etiquette.attente{border-color:var(--indusiax);color:var(--indusiax);}

.lien-copiable{
  display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:11px;
  background:var(--bg);border:1px solid var(--bord);font-size:.82rem;
  font-family:ui-monospace,'Cascadia Mono','Segoe UI Mono',monospace;
  overflow:hidden;
}
.lien-copiable span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
.lien-copiable button{color:var(--acc);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.05em;flex:none;}

table{width:100%;border-collapse:collapse;font-size:.9rem;}
th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;
   color:var(--mut2);font-weight:700;padding:9px 10px;border-bottom:1px solid var(--bord);}
td{padding:11px 10px;border-bottom:1px solid var(--bord);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
.tableau-defilant{overflow-x:auto;border:1px solid var(--bord);border-radius:14px;
  background:var(--bg2);}

.grille-fiches{display:flex;flex-direction:column;gap:10px;}
.compteur-gros{font-size:1.9rem;font-weight:750;letter-spacing:-.03em;line-height:1;}

.sections{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}

/* ── Page d'attente et pages d'erreur ────────────────────────────── */
.centre{min-height:100dvh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:28px 20px;gap:12px;}
.grand-signe{font-size:3rem;line-height:1;}

/* ── Impression : une fiche doit pouvoir être imprimée proprement ── */
@media print{
  body{background:#fff;color:#000;}
  .actions,.qr,.pied,.entete-appli{display:none;}
  .carte{box-shadow:none;border-color:#ccc;}
}