/* Flyzone — appli des gérants et des membres. Maquettes : gérant orange #C2410C, technicien bleu #175CD3, police Archivo */
@font-face { font-family: Archivo; src: url(polices/archivo-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Archivo; src: url(polices/archivo-600.woff2) format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: Archivo; src: url(polices/archivo-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Archivo; src: url(polices/archivo-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }
:root {
  --theme: #C2410C; --theme-f: #9A3412; --theme-clair: #FFF6ED; --theme-bord: #FDBA74; --theme-txt: #FFEDD5;
  --nuit: #1C2434; --fond: #F3F4F7; --carte: #FFFFFF; --texte: #1C2434; --gris: #5D6679; --bord: #D0D5DD; --ligne: #E3E6EC;
  --vert: #067647; --vert-f: #DCFAE6; --ambre: #93370D; --ambre-f: #FEF0C7; --rouge: #B42318; --rouge-f: #FEE4E2;
  --haut: env(safe-area-inset-top, 0px); --bas: env(safe-area-inset-bottom, 0px);
}
body.technicien { --theme: #175CD3; --theme-f: #1849A9; --theme-clair: #EFF8FF; --theme-bord: #84CAFF; --theme-txt: #D1E9FF; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--fond); color: var(--texte); font: 16px/1.4 Archivo, system-ui, sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--theme); }
:focus-visible { outline: 3px solid var(--theme-bord); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Écran */
.ecran { min-height: 100vh; display: flex; flex-direction: column; padding-bottom: calc(76px + var(--bas)); }
.ecran.sans-nav { padding-bottom: var(--bas); }
.bandeau-haut { background: var(--theme); color: #fff; padding: calc(18px + var(--haut)) 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.bandeau-haut .petit { font-size: 14px; color: var(--theme-txt); }
.bandeau-haut .sur { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--theme-txt); }
.bandeau-haut h1 { margin: 0; font-size: 22px; font-weight: 800; }
.bandeau-haut .gros { font-size: 36px; font-weight: 800; letter-spacing: -.02em; }
.ligne-haut { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.barre { background: var(--carte); padding: calc(12px + var(--haut)) 16px 12px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--ligne); position: sticky; top: 0; z-index: 2; }
.barre h1 { margin: 0; font-size: 20px; font-weight: 800; flex: 1; min-width: 0; }
.retour { width: 44px; height: 44px; border-radius: 12px; background: var(--fond); border: 0; display: flex; align-items: center; justify-content: center; flex: none; cursor: pointer; }
.corps { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.etat-sync { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 20px; background: #fff; color: var(--vert); display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; }
.etat-sync i { width: 8px; height: 8px; border-radius: 50%; background: #12B76A; }
.etat-sync.attente { color: var(--ambre); } .etat-sync.attente i { background: #F79009; }
.etat-sync.horsligne { color: var(--gris); } .etat-sync.horsligne i { background: #98A2B3; }

/* Navigation */
.nav { position: fixed; left: 0; right: 0; bottom: 0; background: var(--carte); border-top: 1px solid var(--ligne); display: flex; padding: 6px 2px calc(8px + var(--bas)); z-index: 3; }
.nav a { flex: 1; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--gris); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--theme); font-weight: 700; }
svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Blocs */
.gros-bouton { min-height: 72px; border-radius: 18px; background: var(--nuit); color: #fff; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 20px; font-weight: 800; text-decoration: none; border: 0; width: 100%; cursor: pointer; }
.gros-bouton small { display: block; font-size: 12px; font-weight: 500; color: #CBD2DE; }
.tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tuile { background: var(--carte); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--texte); min-height: 96px; border: 0; text-align: left; cursor: pointer; }
.tuile svg.i { color: var(--theme); }
.tuile b { font-size: 20px; font-weight: 800; }
.tuile span { font-size: 14px; color: var(--gris); }
.tuile span.alerte { color: var(--rouge); font-weight: 600; }
.carte { background: var(--carte); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.carte h2 { margin: 0; font-size: 17px; font-weight: 700; }
.titre { font-size: 15px; font-weight: 700; margin: 4px 2px -4px; }
.info { background: var(--theme-clair); border: 1px solid var(--theme-bord); border-radius: 14px; padding: 12px 14px; font-size: 14px; display: flex; gap: 10px; align-items: center; }
.info.danger { background: var(--rouge-f); border-color: #FDA29B; color: #7A271A; }
.info a, .info button.lien { font-weight: 700; }
.ligne { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.ligne .lib { color: var(--gris); }
.ligne .val { font-weight: 600; text-align: right; }
.ligne .val.gauche { text-align: left; font-weight: 400; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ligne.ligne-j .lib { flex: none; }
.liste { display: flex; flex-direction: column; gap: 10px; }
.element { background: var(--carte); border-radius: 14px; padding: 14px; display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--texte); border: 0; width: 100%; text-align: left; cursor: pointer; }
.element .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.element .nom { font-weight: 700; overflow-wrap: anywhere; }
.element .det { font-size: 13px; color: var(--gris); overflow-wrap: anywhere; }
.pastille { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--theme-clair); color: var(--theme-f); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.etiquette { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.etiquette.ok { background: var(--vert-f); color: var(--vert); }
.etiquette.att { background: var(--ambre-f); color: var(--ambre); }
.etiquette.ko { background: var(--rouge-f); color: var(--rouge); }
.etiquette.neutre { background: var(--fond); color: var(--gris); }
.vide { color: var(--gris); font-size: 14px; text-align: center; padding: 18px 8px; }
.note { font-size: 12px; color: var(--gris); text-align: center; }

/* Vente */
.forfaits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.forfait { min-height: 84px; border-radius: 14px; padding: 10px 12px; background: var(--carte); border: 2px solid transparent; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; text-align: left; cursor: pointer; }
.forfait[aria-pressed="true"] { background: var(--theme-clair); border-color: var(--theme); }
.forfait:disabled { opacity: .45; cursor: not-allowed; }
.forfait .n { font-size: 16px; font-weight: 700; }
.forfait .p { font-size: 20px; font-weight: 800; }
.forfait .s { font-size: 12px; color: var(--gris); }
#etape-code, #liste-codes { scroll-margin-top: 84px; }
.code-vente.flash { animation: clignote .7s ease-out; }
@keyframes clignote { 0% { background: var(--theme-bord); transform: scale(1.03); } 100% { background: var(--carte); transform: scale(1); } }   /* sous la barre du haut, qui reste visible */
.forfait.code-choix { min-height: 64px; }
.forfait.code-choix .n { font-size: 20px; font-weight: 800; letter-spacing: .08em; overflow-wrap: anywhere; }
.forfait.code-choix .s { color: var(--vert); font-weight: 700; }
.code-vente { background: var(--carte); border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.code-vente .c { font-size: 24px; font-weight: 800; letter-spacing: .12em; overflow-wrap: anywhere; }
.code-vente .prix { font-size: 18px; font-weight: 800; color: var(--theme); }

/* Formulaires */
label.champ { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
input, select, textarea { min-height: 52px; border: 1.5px solid var(--bord); border-radius: 12px; padding: 0 14px; font-size: 17px; background: var(--carte); width: 100%; }
textarea { padding: 12px 14px; min-height: 120px; font-size: 15px; font-family: ui-monospace, Consolas, monospace; }
input:focus, select:focus, textarea:focus { border-color: var(--theme); outline: none; }
.prefixe { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--bord); border-radius: 12px; padding: 0 14px; min-height: 54px; background: var(--carte); }
.prefixe span { font-weight: 600; color: var(--gris); }
.prefixe input { border: 0; padding: 0; min-height: 50px; }
.prefixe:focus-within { border-color: var(--theme); }
.cases { display: flex; flex-direction: column; gap: 2px; }
.case { display: flex; align-items: center; gap: 12px; min-height: 48px; font-size: 15px; font-weight: 500; cursor: pointer; }
.case input { width: 22px; height: 22px; min-height: 0; accent-color: var(--theme); flex: none; }
.case small { display: block; color: var(--gris); font-size: 12px; }
.groupe-cases { font-size: 13px; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; margin-top: 8px; }
.bouton { min-height: 54px; padding: 0 18px; border-radius: 14px; border: 0; background: var(--theme); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; width: 100%; }
.bouton:disabled { opacity: .5; cursor: not-allowed; }
.bouton.nuit { background: var(--nuit); }
.bouton.vert { background: var(--vert); }
.bouton.second { background: var(--carte); color: var(--texte); border: 1px solid var(--bord); }
.bouton.danger { background: var(--carte); color: var(--rouge); border: 1px solid #FDA29B; }
.bouton.petit { min-height: 46px; font-size: 14px; border-radius: 10px; }
.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.onglets { display: flex; gap: 6px; background: var(--carte); border-radius: 12px; padding: 4px; }
.onglets button { flex: 1; min-height: 44px; border: 0; border-radius: 9px; background: transparent; font-weight: 600; font-size: 14px; cursor: pointer; }
.onglets button[aria-pressed="true"] { background: var(--theme); color: #fff; }
.recherche { display: flex; align-items: center; gap: 10px; background: var(--carte); border-radius: 12px; padding: 0 14px; min-height: 50px; }
.recherche input { border: 0; padding: 0; min-height: 48px; }
.erreur { color: var(--rouge); font-size: 14px; min-height: 18px; margin: 0; }

/* Connexion */
.accueil-connexion { min-height: 100vh; display: flex; flex-direction: column; background: var(--carte); }
.accueil-connexion .tete { background: var(--theme); color: #fff; min-height: 260px; padding: calc(20px + var(--haut)) 28px 30px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.logo { width: 72px; height: 72px; border-radius: 20px; display: block; box-shadow: 0 0 0 3px rgba(255, 255, 255, .85); }
.accueil-connexion .marque { font-size: 30px; font-weight: 800; }
.accueil-connexion .slogan { font-size: 16px; color: var(--theme-txt); }
.accueil-connexion form { flex: 1; padding: 26px 28px calc(24px + var(--bas)); display: flex; flex-direction: column; gap: 16px; }
.accueil-connexion h2 { margin: 0; font-size: 22px; font-weight: 800; }

/* Messages */
#toast { position: fixed; left: 50%; bottom: calc(92px + var(--bas)); transform: translateX(-50%); background: var(--nuit); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14px; max-width: calc(100% - 32px); z-index: 20; text-align: center; }
#modale { position: fixed; inset: 0; background: rgba(16, 24, 40, .6); z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; }
#modale .boite { background: var(--carte); border-radius: 16px; max-width: 440px; width: 100%; overflow: hidden; }
#modale .boite .tete-m { background: var(--rouge); color: #fff; padding: 14px 16px; font-weight: 700; font-size: 17px; }
#modale .boite .txt-m { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
#modale .boite .pied-m { padding: 0 16px 16px; }

/* Carte des box */
.carte-box { height: 62vh; min-height: 320px; border-radius: 16px; overflow: hidden; border: 1px solid var(--bord); z-index: 0; }
.apercu { white-space: pre-wrap; font-size: 13px; line-height: 1.45; background: var(--fond); border-radius: 10px; padding: 8px 10px; overflow-wrap: anywhere; }
.compteur { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.compteur .bouton { width: 44px; min-height: 44px; padding: 0; font-size: 22px; }
.compteur b { min-width: 24px; text-align: center; font-size: 18px; }
.carte-cadre { position: relative; }
.valider-carte { position: absolute; left: 12px; right: 12px; bottom: 26px; width: auto; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.valider-carte[hidden] { display: none; }
.legende { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--gris); align-items: center; }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.point { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--bord); }
.point.ok { background: var(--vert); } .point.ko { background: var(--rouge); }
.bulle-box { display: flex; flex-direction: column; gap: 6px; min-width: 170px; font: 14px/1.3 Archivo, system-ui, sans-serif; }
.bulle-box b { font-size: 15px; }
.repere-box { background: var(--theme); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 1px 6px rgba(0,0,0,.45); }
.lien-annuler { margin-left: 10px; border: 0; background: none; color: var(--rouge); font-weight: 700; font-size: 13px; text-decoration: underline; padding: 6px 0 6px 4px; cursor: pointer; }
.lien-annuler.voir { color: inherit; }
.rouge { color: var(--rouge); }

/* Inscription et abonnement */
.formule-choix { align-items: flex-start; padding: 8px 0; }
.formule-choix input { margin-top: 2px; }
.formule-choix b { display: block; font-size: 16px; }
.gros-prix { font-size: 18px; font-weight: 800; color: var(--theme); }
.etapes { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.texte-long p { margin: 0; font-size: 14px; line-height: 1.5; }
button.info { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }

/* Version web sur ordinateur (en fin de fichier pour passer avant les règles du téléphone) :
   l'appli occupe tout l'écran, avec plus de colonnes et de marges */
@media (min-width: 700px) {
  .corps { padding: 22px 32px; }
  .barre, .bandeau-haut { padding-left: 32px; padding-right: 32px; }
  .tuiles, .forfaits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nav { justify-content: center; }
  .nav a { flex: 0 1 160px; font-size: 12px; }
}
@media (min-width: 1100px) {
  .liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Statistiques : filtres, cartes de comparaison, courbes, classements, zones à surveiller */
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { border: 1px solid var(--bord); background: var(--carte); border-radius: 20px; padding: 6px 14px; min-height: 36px; font-weight: 600; font-size: 14px; cursor: pointer; }
.puce[aria-pressed="true"] { background: var(--theme-clair); border-color: var(--theme); color: var(--theme-f); }
.onglets.petit button { min-height: 36px; font-size: 13px; }
.comps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.comp { background: var(--carte); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.comp .lib { font-size: 13px; color: var(--gris); }
.comp b { font-size: 20px; font-weight: 800; }
.comp-l { font-size: 12.5px; color: var(--gris); }
.evol { font-weight: 700; color: var(--gris); white-space: nowrap; }
.evol.bon { color: var(--vert); } .evol.mauvais { color: var(--rouge); }
.courbe { position: relative; }
.courbe svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.courbe .grille { stroke: var(--ligne); stroke-width: 1; }
.courbe .axe { fill: var(--gris); font-size: 11px; font-family: inherit; }
.courbe .viseur { stroke: var(--gris); stroke-width: 1; stroke-dasharray: 3 3; }
.bulle-courbe { position: absolute; top: 0; background: var(--nuit); color: #fff; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; pointer-events: none; display: flex; flex-direction: column; gap: 3px; white-space: nowrap; z-index: 2; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.bulle-courbe i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.legende .trait { display: inline-block; width: 22px; border-top: 3px solid; }
.legende .trait.tirets { border-top-style: dashed; }
.table-courbe summary { cursor: pointer; font-size: 13px; color: var(--gris); padding-top: 8px; }
.tableau-scroll { overflow-x: auto; }
.tableau-scroll table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tableau-scroll th, .tableau-scroll td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.tableau-scroll th { color: var(--gris); font-weight: 600; white-space: nowrap; }
.rang { padding: 8px 0; border-bottom: 1px solid var(--ligne); }
.rang:last-child { border-bottom: 0; }
.rang .det { font-size: 12.5px; color: var(--gris); }
.jauge { height: 8px; background: var(--fond); border-radius: 4px; margin: 6px 0 4px; overflow: hidden; }
.jauge i { display: block; height: 100%; background: var(--theme); border-radius: 4px; }
.zone b { font-size: 20px; font-weight: 800; }
.zone.z1 { background: #FDE2DD; } .zone.z2 { background: #F9A99B; } .zone.z3 { background: #EF6A55; color: #fff; } .zone.z4 { background: #9E1F12; color: #fff; }
.zone.z3 .det, .zone.z4 .det { color: #FFE4DE; }
.dossier { background: var(--carte); border: 2px solid #9E1F12; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.carte-stats { height: 48vh; min-height: 280px; }
.point.n0 { background: #C9CED6; } .point.n1 { background: #F9A99B; } .point.n2 { background: #EF6A55; } .point.n4 { background: #9E1F12; }

/* Importer mes tickets : aperçu, résumé, aide */
.comp.ok b { color: var(--vert); } .comp.ko b { color: var(--rouge); }
.info.ok-grand { background: var(--vert-f); color: var(--vert); border-color: #A6E3BF; flex-direction: column; align-items: flex-start; gap: 2px; }
.info.ok-grand b { font-size: 20px; }
.erreurs-import .lib { font-size: 13px; }
.erreurs-import small { color: var(--gris); font-family: Consolas, monospace; }
details.aide { background: var(--carte); border-radius: 14px; padding: 12px 14px; font-size: 14px; }
details.aide summary { cursor: pointer; font-weight: 700; }
details.aide p { margin: 8px 0 0; }
details.aide code { background: var(--fond); border-radius: 6px; padding: 1px 6px; font-size: 13px; overflow-wrap: anywhere; }
/* Lien MikroTik : script à copier dans WinBox */
.script-mk { min-height: 180px; font-size: 11px; white-space: pre; overflow: auto; }
h2 .point { margin-right: 8px; vertical-align: middle; }
/* Bilan de la semaine écrit par l'IA */
.bilan-ia ul { margin: 0; padding-left: 20px; }
.bilan-ia li { margin: 4px 0; line-height: 1.4; }
.bilan-ia.bon { border-left: 4px solid var(--vert); }
.bilan-ia.mauvais { border-left: 4px solid var(--rouge); }

/* Code donné au client (vendeur, après son code secret) */
.code-donne { font: 700 28px/1.3 ui-monospace, Consolas, monospace; letter-spacing: 2px; user-select: all; }
.erreur-m { color: var(--rouge); font-size: 14px; min-height: 1em; }

/* Résumé du jour, clients fidèles, aperçu de la page de connexion */
.alerte-carte { border-left: 4px solid var(--rouge); }
.cadeau-carte { border-left: 4px solid var(--vert); }
#cl-promo { width: 100%; font: inherit; padding: 10px 12px; border: 1.5px solid var(--bord); border-radius: 12px; background: var(--carte); color: var(--texte); margin: 6px 0; }
.apercu-portail { border: 1px solid var(--bord); border-radius: 16px; overflow: hidden; background: #F3F4F7; color: #1C2434; max-width: 380px; margin: 0 auto 12px; }
.ap-tete { background: #C2410C; color: #fff; padding: 12px 14px; display: flex; flex-direction: column; }
.ap-tete span { font-size: 12.5px; opacity: .9; }
.ap-corps { padding: 12px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.ap-annonce { background: #FFF6ED; border: 1px solid #C2410C; border-radius: 12px; padding: 10px 12px; }
.ap-acheter { background: #C2410C; color: #fff; border-radius: 14px; padding: 12px; text-align: center; font-weight: 700; font-size: 17px; }
.ap-acheter small { display: block; font-weight: 400; font-size: 12px; opacity: .92; }
.ap-ou { text-align: center; color: #5D6679; font-size: 13px; }
.ap-form { background: #fff; border: 1px solid #D0D5DD; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 4px; color: #5D6679; font-size: 13px; }
.ap-form i { display: block; height: 32px; border: 1.5px solid #D0D5DD; border-radius: 10px; margin-bottom: 6px; }
.ap-btn { background: #C2410C; color: #fff; border-radius: 999px; padding: 10px; text-align: center; font-weight: 700; }
.ap-tarifs { background: #fff; border: 1px solid #D0D5DD; border-radius: 14px; padding: 10px 12px; }
.ap-tarifs .ligne { display: flex; justify-content: space-between; padding: 5px 0; border-top: 1px solid #D0D5DD; }
textarea[name=message] { font: inherit; }