G\u00e9n\u00e9rateur de QR Code Ath\u00e9na<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@400;600;700;800&family=Open+Sans:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/qrcodejs\/1.0.0\/qrcode.min.js\"><\/script>\n<style>\n :root {\n \/* Couleurs extraites visuellement du site moncollege-valdoise.fr *\/\n --bleu-header: #1b2a4a; \/* bleu marine tr\u00e8s fonc\u00e9 \u2014 header & footer *\/\n --bleu-nav: #223560; \/* bleu navigation secondaire *\/\n --bleu-lien: #2d5fa6; \/* liens et \u00e9l\u00e9ments actifs *\/\n --bleu-clair: #dce8f5; \/* fond bleu tr\u00e8s l\u00e9ger *\/\n --orange: #e8630a; \/* orange vif \u2014 accent principal & boutons CTA *\/\n --orange-hover: #d45a07;\n --orange-clair: #fff0e6;\n --gris-fond: #f2f4f7;\n --gris-bord: #d4dae6;\n --gris-texte: #3d4a5c;\n --gris-muted: #7a8499;\n --texte: #1c2333;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n body {\n font-family: 'Open Sans', Arial, sans-serif;\n background: var(--gris-fond);\n color: var(--texte);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n HEADER\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .site-header {\n background: var(--bleu-header);\n padding: 0 40px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n min-height: 70px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.3);\n flex-wrap: wrap;\n gap: 12px;\n }\n\n .header-left {\n display: flex;\n align-items: center;\n gap: 0;\n }\n\n .logo-vdo {\n display: flex;\n align-items: center;\n gap: 12px;\n text-decoration: none;\n padding-right: 22px;\n border-right: 1px solid rgba(255,255,255,0.2);\n margin-right: 22px;\n }\n\n .logo-emblem {\n width: 42px;\n height: 42px;\n background: rgba(255,255,255,0.12);\n border: 1px solid rgba(255,255,255,0.25);\n border-radius: 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Nunito', sans-serif;\n font-size: 9px;\n font-weight: 800;\n color: white;\n line-height: 1.2;\n text-align: center;\n letter-spacing: 0.04em;\n flex-shrink: 0;\n }\n\n .logo-text-block { color: white; line-height: 1.18; }\n .logo-text-block .mon-college {\n font-family: 'Nunito', sans-serif;\n font-size: 20px;\n font-weight: 800;\n display: block;\n }\n .logo-text-block .val-doise {\n font-size: 10.5px;\n font-weight: 400;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n opacity: 0.72;\n display: block;\n }\n\n .header-tool {\n color: rgba(255,255,255,0.88);\n font-size: 14.5px;\n font-weight: 600;\n }\n\n .btn-connect {\n background: var(--orange);\n color: white;\n border: none;\n border-radius: 5px;\n padding: 9px 17px;\n font-family: 'Open Sans', sans-serif;\n font-size: 13px;\n font-weight: 700;\n cursor: pointer;\n text-decoration: none;\n transition: background 0.18s;\n display: inline-flex;\n align-items: center;\n gap: 7px;\n }\n .btn-connect:hover { background: var(--orange-hover); }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NAVIGATION\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .site-nav {\n background: var(--bleu-nav);\n padding: 0 40px;\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n border-bottom: 3px solid var(--orange);\n }\n\n .nav-item {\n color: rgba(255,255,255,0.78);\n text-decoration: none;\n font-size: 13.5px;\n font-weight: 600;\n padding: 13px 17px;\n display: block;\n transition: color 0.15s, background 0.15s;\n position: relative;\n }\n .nav-item:hover { color: white; background: rgba(255,255,255,0.08); }\n .nav-item.active {\n color: white;\n background: rgba(255,255,255,0.12);\n }\n .nav-item.active::after {\n content: '';\n position: absolute;\n bottom: -3px; left: 0; right: 0;\n height: 3px;\n background: var(--orange);\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BREADCRUMB\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .breadcrumb {\n background: white;\n border-bottom: 1px solid var(--gris-bord);\n padding: 10px 40px;\n font-size: 12.5px;\n color: var(--gris-muted);\n display: flex;\n align-items: center;\n gap: 7px;\n }\n .breadcrumb a { color: var(--bleu-lien); text-decoration: none; }\n .breadcrumb a:hover { text-decoration: underline; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CONTENU PRINCIPAL\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .main-content {\n flex: 1;\n padding: 34px 40px;\n max-width: 1100px;\n margin: 0 auto;\n width: 100%;\n }\n\n .page-head { margin-bottom: 28px; }\n\n .page-head h1 {\n font-family: 'Nunito', sans-serif;\n font-size: 27px;\n font-weight: 800;\n color: var(--bleu-header);\n margin-bottom: 7px;\n display: flex;\n align-items: center;\n gap: 13px;\n }\n\n .h1-icon {\n width: 38px; height: 38px;\n background: var(--orange);\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .page-head p {\n color: var(--gris-texte);\n font-size: 14.5px;\n line-height: 1.65;\n max-width: 620px;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n GRILLE 2 COLONNES\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .app-grid {\n display: grid;\n grid-template-columns: 1fr 358px;\n gap: 24px;\n align-items: start;\n }\n\n @media (max-width: 820px) {\n .app-grid { grid-template-columns: 1fr; }\n .site-header, .site-nav, .breadcrumb, .main-content { padding-left: 18px; padding-right: 18px; }\n .site-header { padding-top: 14px; padding-bottom: 14px; }\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CARTE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .card {\n background: white;\n border: 1px solid var(--gris-bord);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n overflow: hidden;\n }\n\n .card-header {\n background: var(--bleu-header);\n color: white;\n padding: 14px 22px;\n font-family: 'Nunito', sans-serif;\n font-size: 15px;\n font-weight: 700;\n display: flex;\n align-items: center;\n gap: 9px;\n letter-spacing: 0.01em;\n }\n\n .card-body { padding: 24px 22px; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n ONGLETS TYPE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .type-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-bottom: 24px;\n }\n\n .type-tab {\n background: var(--gris-fond);\n border: 1.5px solid var(--gris-bord);\n border-radius: 20px;\n color: var(--gris-texte);\n cursor: pointer;\n font-family: 'Open Sans', sans-serif;\n font-size: 12.5px;\n font-weight: 600;\n padding: 6px 14px;\n transition: all 0.16s;\n white-space: nowrap;\n }\n .type-tab:hover { border-color: var(--bleu-lien); color: var(--bleu-lien); background: var(--bleu-clair); }\n .type-tab.active { background: var(--bleu-lien); border-color: var(--bleu-lien); color: white; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FORMULAIRES\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .form-section { display: none; }\n .form-section.active { display: block; }\n\n .field { margin-bottom: 17px; }\n .field:last-child { margin-bottom: 0; }\n\n .field > label, label.field-label {\n display: block;\n font-size: 11.5px;\n font-weight: 700;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: var(--bleu-header);\n margin-bottom: 7px;\n }\n\n input[type=\"text\"], textarea, select {\n width: 100%;\n background: white;\n border: 1.5px solid var(--gris-bord);\n border-radius: 6px;\n color: var(--texte);\n font-family: 'Open Sans', sans-serif;\n font-size: 14px;\n padding: 10px 13px;\n outline: none;\n transition: border-color 0.2s, box-shadow 0.2s;\n }\n input[type=\"text\"]:focus, textarea:focus, select:focus {\n border-color: var(--bleu-lien);\n box-shadow: 0 0 0 3px rgba(45,95,166,0.13);\n }\n textarea { resize: vertical; min-height: 82px; }\n select {\n appearance: none;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237a8499'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 13px center;\n padding-right: 34px;\n cursor: pointer;\n }\n\n .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n\n .divider {\n border: none;\n border-top: 1px solid var(--gris-bord);\n margin: 22px 0 20px;\n }\n\n .sub-section-title {\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--gris-muted);\n margin-bottom: 15px;\n }\n\n \/* Slider *\/\n .slider-row { display: flex; align-items: center; gap: 13px; }\n input[type=\"range\"] { flex: 1; accent-color: var(--bleu-lien); cursor: pointer; }\n .slider-val {\n min-width: 54px;\n text-align: right;\n font-size: 13px;\n font-weight: 700;\n color: var(--bleu-lien);\n }\n\n \/* Couleurs *\/\n .color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n .color-field > label {\n display: block;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: var(--gris-muted);\n margin-bottom: 6px;\n }\n input[type=\"color\"] {\n width: 100%;\n height: 42px;\n border: 1.5px solid var(--gris-bord);\n border-radius: 6px;\n padding: 4px 5px;\n cursor: pointer;\n background: white;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BOUTON G\u00c9N\u00c9RER\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .btn-generate {\n width: 100%;\n background: var(--orange);\n border: none;\n border-radius: 6px;\n color: white;\n cursor: pointer;\n font-family: 'Nunito', sans-serif;\n font-size: 16px;\n font-weight: 800;\n letter-spacing: 0.03em;\n padding: 14px 20px;\n margin-top: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 9px;\n transition: background 0.18s, transform 0.12s, box-shadow 0.18s;\n box-shadow: 0 3px 10px rgba(232,99,10,0.35);\n }\n .btn-generate:hover { background: var(--orange-hover); transform: translateY(-1px); box-shadow: 0 5px 14px rgba(232,99,10,0.4); }\n .btn-generate:active { transform: none; box-shadow: none; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n APER\u00c7U\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .preview-sticky { position: sticky; top: 20px; }\n\n .qr-zone {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 265px;\n padding: 18px;\n background: var(--gris-fond);\n border: 2px dashed var(--gris-bord);\n border-radius: 8px;\n margin-bottom: 15px;\n transition: border-color 0.3s, background 0.3s;\n }\n .qr-zone.ready { background: white; border-style: solid; border-color: var(--bleu-clair); }\n\n #qr-output { display: flex; align-items: center; justify-content: center; }\n #qr-output canvas, #qr-output img { max-width: 100%; display: block; border-radius: 4px; }\n\n .placeholder-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 13px;\n color: var(--gris-muted);\n font-size: 13px;\n text-align: center;\n padding: 20px;\n line-height: 1.55;\n }\n\n .placeholder-state svg { opacity: 0.2; }\n\n \/* Info data *\/\n .qr-data-info {\n background: var(--bleu-clair);\n border: 1px solid #b5cfe8;\n border-radius: 6px;\n padding: 10px 13px;\n font-size: 12px;\n color: var(--bleu-header);\n word-break: break-all;\n line-height: 1.5;\n margin-bottom: 13px;\n display: none;\n gap: 8px;\n align-items: flex-start;\n }\n .qr-data-info.visible { display: flex; }\n .qr-data-info svg { flex-shrink: 0; color: var(--bleu-lien); margin-top: 1px; }\n\n \/* Boutons DL *\/\n .dl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n\n .btn-dl {\n background: white;\n border: 2px solid var(--bleu-lien);\n border-radius: 6px;\n color: var(--bleu-lien);\n cursor: pointer;\n font-family: 'Open Sans', sans-serif;\n font-size: 13px;\n font-weight: 700;\n padding: 10px 8px;\n display: none;\n align-items: center;\n justify-content: center;\n gap: 6px;\n transition: all 0.16s;\n }\n .btn-dl:hover { background: var(--bleu-lien); color: white; }\n .btn-dl.visible { display: flex; }\n\n \/* Astuce *\/\n .tip-box {\n background: var(--orange-clair);\n border-left: 4px solid var(--orange);\n border-radius: 0 6px 6px 0;\n padding: 12px 15px;\n font-size: 12.5px;\n color: #7a3500;\n margin-top: 17px;\n line-height: 1.55;\n display: flex;\n gap: 10px;\n align-items: flex-start;\n }\n .tip-box svg { flex-shrink: 0; color: var(--orange); margin-top: 2px; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOOTER\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .site-footer {\n background: var(--bleu-header);\n color: rgba(255,255,255,0.55);\n font-size: 12.5px;\n padding: 20px 40px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 12px;\n margin-top: auto;\n }\n\n .footer-brand {\n display: flex;\n align-items: center;\n gap: 9px;\n color: rgba(255,255,255,0.9);\n font-family: 'Nunito', sans-serif;\n font-weight: 700;\n font-size: 14px;\n }\n\n .footer-links { display: flex; gap: 18px; flex-wrap: wrap; }\n .footer-links a {\n color: rgba(255,255,255,0.5);\n text-decoration: none;\n font-size: 12px;\n transition: color 0.15s;\n }\n .footer-links a:hover { color: white; }\n\n .footer-copy { color: rgba(255,255,255,0.35); font-size: 12px; }\n<\/style>\n<\/head>\n<body>\n\n\n<main class=\"main-content\">\n\n <div class=\"page-head\">\n <h1>\n <span class=\"h1-icon\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2.5\">\n <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/>\n <rect x=\"5\" y=\"5\" width=\"3\" height=\"3\" fill=\"white\" stroke=\"none\"\/>\n <rect x=\"16\" y=\"5\" width=\"3\" height=\"3\" fill=\"white\" stroke=\"none\"\/>\n <rect x=\"5\" y=\"16\" width=\"3\" height=\"3\" fill=\"white\" stroke=\"none\"\/>\n <rect x=\"14\" y=\"14\" width=\"2\" height=\"2\" fill=\"white\" stroke=\"none\"\/>\n <rect x=\"18\" y=\"14\" width=\"3\" height=\"3\" fill=\"white\" stroke=\"none\"\/>\n <rect x=\"14\" y=\"18\" width=\"3\" height=\"3\" fill=\"white\" stroke=\"none\"\/>\n <\/svg>\n <\/span>\n G\u00e9n\u00e9rateur de QR Code Ath\u00e9na\n <\/h1>\n <p>Cr\u00e9ez facilement des QR codes pour vos communications scolaires, vos affichages, vos supports p\u00e9dagogiques.<\/p>\n <\/div>\n\n <div class=\"app-grid\">\n\n \n <div class=\"card\">\n <div class=\"card-header\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\n <path d=\"M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z\"\/>\n <\/svg>\n Configuration du QR Code\n <\/div>\n\n <div class=\"card-body\">\n\n \n <div class=\"type-tabs\">\n <button class=\"type-tab active\" onclick=\"switchTab('url',this)\">\ud83d\udd17 URL<\/button>\n <button class=\"type-tab\" onclick=\"switchTab('text',this)\">\ud83d\udcdd Texte<\/button>\n <button class=\"type-tab\" onclick=\"switchTab('email',this)\">\u2709\ufe0f Email<\/button>\n <button class=\"type-tab\" onclick=\"switchTab('tel',this)\">\ud83d\udcde T\u00e9l\u00e9phone<\/button>\n <button class=\"type-tab\" onclick=\"switchTab('wifi',this)\">\ud83d\udcf6 Wi-Fi<\/button>\n <button class=\"type-tab\" onclick=\"switchTab('vcard',this)\">\ud83d\udc64 Contact<\/button>\n <\/div>\n\n \n <div class=\"form-section active\" id=\"tab-url\">\n <div class=\"field\">\n <label>Adresse web (URL)<\/label>\n <input type=\"text\" id=\"url-input\" placeholder=\"https:\/\/moncollege-valdoise.fr\" \/>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\" id=\"tab-text\">\n <div class=\"field\">\n <label>Texte libre<\/label>\n <textarea id=\"text-input\" placeholder=\"Entrez votre texte ici...\"><\/textarea>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\" id=\"tab-email\">\n <div class=\"field\">\n <label>Adresse email<\/label>\n <input type=\"text\" id=\"email-to\" placeholder=\"contact@college.fr\" \/>\n <\/div>\n <div class=\"field\">\n <label>Sujet<\/label>\n <input type=\"text\" id=\"email-subject\" placeholder=\"Sujet de l'email\" \/>\n <\/div>\n <div class=\"field\">\n <label>Corps du message<\/label>\n <textarea id=\"email-body\" placeholder=\"Message...\"><\/textarea>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\" id=\"tab-tel\">\n <div class=\"field\">\n <label>Num\u00e9ro de t\u00e9l\u00e9phone<\/label>\n <input type=\"text\" id=\"tel-input\" placeholder=\"+33 1 34 25 30 30\" \/>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\" id=\"tab-wifi\">\n <div class=\"field\">\n <label>Nom du r\u00e9seau (SSID)<\/label>\n <input type=\"text\" id=\"wifi-ssid\" placeholder=\"College-WiFi\" \/>\n <\/div>\n <div class=\"field\">\n <label>Mot de passe<\/label>\n <input type=\"text\" id=\"wifi-pass\" placeholder=\"motdepasse\" \/>\n <\/div>\n <div class=\"field\">\n <label>Type de s\u00e9curit\u00e9<\/label>\n <select id=\"wifi-sec\">\n <option value=\"WPA\">WPA \/ WPA2<\/option>\n <option value=\"WEP\">WEP<\/option>\n <option value=\"\">Aucune (r\u00e9seau ouvert)<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\" id=\"tab-vcard\">\n <div class=\"two-col\">\n <div class=\"field\">\n <label>Pr\u00e9nom<\/label>\n <input type=\"text\" id=\"vc-prenom\" placeholder=\"Jean\" \/>\n <\/div>\n <div class=\"field\">\n <label>Nom<\/label>\n <input type=\"text\" id=\"vc-nom\" placeholder=\"Dupont\" \/>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>T\u00e9l\u00e9phone<\/label>\n <input type=\"text\" id=\"vc-tel\" placeholder=\"+33 6 12 34 56 78\" \/>\n <\/div>\n <div class=\"field\">\n <label>Email<\/label>\n <input type=\"text\" id=\"vc-email\" placeholder=\"jean.dupont@college.fr\" \/>\n <\/div>\n <div class=\"field\">\n <label>\u00c9tablissement<\/label>\n <input type=\"text\" id=\"vc-org\" placeholder=\"Coll\u00e8ge Val d'Oise\" \/>\n <\/div>\n <\/div>\n\n \n <hr class=\"divider\">\n <p class=\"sub-section-title\">Apparence<\/p>\n\n <div class=\"field\">\n <label>Taille du QR Code<\/label>\n <div class=\"slider-row\">\n <input type=\"range\" id=\"size-input\" min=\"128\" max=\"512\" step=\"16\" value=\"256\"\n oninput=\"document.getElementById('size-val').textContent = this.value + ' px'\">\n <span class=\"slider-val\" id=\"size-val\">256 px<\/span>\n <\/div>\n <\/div>\n\n <div class=\"field\">\n <label>Niveau de correction d’erreur<\/label>\n <select id=\"ec-level\">\n <option value=\"L\">L \u2013 Faible (7 %) \u2014 petits QR codes<\/option>\n <option value=\"M\" selected>M \u2013 Moyen (15 %) \u2014 usage g\u00e9n\u00e9ral<\/option>\n <option value=\"Q\">Q \u2013 Quartile (25 %)<\/option>\n <option value=\"H\">H \u2013 \u00c9lev\u00e9 (30 %) \u2014 affichage \/ impression<\/option>\n <\/select>\n <\/div>\n\n <div class=\"field\">\n <label>Couleurs<\/label>\n <div class=\"color-grid\">\n <div class=\"color-field\">\n <label>Couleur principale<\/label>\n <input type=\"color\" id=\"color-dark\" value=\"#1b2a4a\">\n <\/div>\n <div class=\"color-field\">\n <label>Couleur de fond<\/label>\n <input type=\"color\" id=\"color-light\" value=\"#ffffff\">\n <\/div>\n <\/div>\n <\/div>\n\n <button class=\"btn-generate\" onclick=\"generateQR()\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"\/>\n <\/svg>\n G\u00e9n\u00e9rer le QR Code\n <\/button>\n\n <\/div>\n <\/div>\n\n \n <div class=\"preview-sticky\">\n <div class=\"card\">\n <div class=\"card-header\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/>\n <\/svg>\n Aper\u00e7u\n <\/div>\n <div class=\"card-body\">\n\n <div class=\"qr-zone\" id=\"qr-zone\">\n <div id=\"qr-output\">\n <div class=\"placeholder-state\">\n \n <svg width=\"72\" height=\"72\" viewBox=\"0 0 80 80\" fill=\"none\" stroke=\"#1b2a4a\" stroke-width=\"3.5\">\n <rect x=\"4\" y=\"4\" width=\"30\" height=\"30\" rx=\"2\"\/>\n <rect x=\"46\" y=\"4\" width=\"30\" height=\"30\" rx=\"2\"\/>\n <rect x=\"4\" y=\"46\" width=\"30\" height=\"30\" rx=\"2\"\/>\n <rect x=\"11\" y=\"11\" width=\"16\" height=\"16\" fill=\"#1b2a4a\" stroke=\"none\"\/>\n <rect x=\"53\" y=\"11\" width=\"16\" height=\"16\" fill=\"#1b2a4a\" stroke=\"none\"\/>\n <rect x=\"11\" y=\"53\" width=\"16\" height=\"16\" fill=\"#1b2a4a\" stroke=\"none\"\/>\n <rect x=\"46\" y=\"46\" width=\"8\" height=\"8\" fill=\"#1b2a4a\" stroke=\"none\"\/>\n <rect x=\"60\" y=\"46\" width=\"16\" height=\"16\" rx=\"1\" fill=\"#1b2a4a\" stroke=\"none\"\/>\n <rect x=\"46\" y=\"60\" width=\"16\" height=\"16\" rx=\"1\" fill=\"#1b2a4a\" stroke=\"none\"\/>\n <\/svg>\n Configurez les options<br>puis cliquez sur<br><strong>G\u00e9n\u00e9rer le QR Code<\/strong>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"qr-data-info\" id=\"qr-info\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/>\n <\/svg>\n <span id=\"qr-info-text\"><\/span>\n <\/div>\n\n <div class=\"dl-row\">\n <button class=\"btn-dl\" id=\"dl-png\" onclick=\"downloadPNG()\">\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <path d=\"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/>\n <\/svg>\n PNG\n <\/button>\n <button class=\"btn-dl\" id=\"dl-svg\" onclick=\"downloadSVG()\">\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <path d=\"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/>\n <\/svg>\n SVG\n <\/button>\n <\/div>\n\n <div class=\"tip-box\">\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/>\n <\/svg>\n <span>Pour vos affiches et impressions, choisissez une taille <strong>400 px ou plus<\/strong> et le niveau de correction <strong>H (\u00c9lev\u00e9)<\/strong>.<\/span>\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n<\/main>\n\n\n\n<script>\nlet currentTab = 'url';\n\nfunction switchTab(tab, btn) {\n document.querySelectorAll('.type-tab').forEach(t => t.classList.remove('active'));\n btn.classList.add('active');\n document.querySelectorAll('.form-section').forEach(s => s.classList.remove('active'));\n document.getElementById('tab-' + tab).classList.add('active');\n currentTab = tab;\n}\n\nfunction buildData() {\n switch (currentTab) {\n case 'url': {\n return document.getElementById('url-input').value.trim() || null;\n }\n case 'text': {\n return document.getElementById('text-input').value.trim() || null;\n }\n case 'email': {\n const to = document.getElementById('email-to').value.trim();\n if (!to) return null;\n const sub = encodeURIComponent(document.getElementById('email-subject').value.trim());\n const body = encodeURIComponent(document.getElementById('email-body').value.trim());\n return `mailto:${to}?subject=${sub}&body=${body}`;\n }\n case 'tel': {\n const v = document.getElementById('tel-input').value.trim();\n return v ? `tel:${v.replace(\/\\s\/g, '')}` : null;\n }\n case 'wifi': {\n const ssid = document.getElementById('wifi-ssid').value.trim();\n if (!ssid) return null;\n const pass = document.getElementById('wifi-pass').value.trim();\n const sec = document.getElementById('wifi-sec').value;\n return `WIFI:T:${sec};S:${ssid};P:${pass};;`;\n }\n case 'vcard': {\n const prenom = document.getElementById('vc-prenom').value.trim();\n const nom = document.getElementById('vc-nom').value.trim();\n const name = [prenom, nom].filter(Boolean).join(' ');\n if (!name) return null;\n const tel = document.getElementById('vc-tel').value.trim();\n const email = document.getElementById('vc-email').value.trim();\n const org = document.getElementById('vc-org').value.trim();\n let v = `BEGIN:VCARD\\nVERSION:3.0\\nFN:${name}\\nN:${nom};${prenom};;;\\n`;\n if (tel) v += `TEL;TYPE=WORK:${tel}\\n`;\n if (email) v += `EMAIL:${email}\\n`;\n if (org) v += `ORG:${org}\\n`;\n return v + 'END:VCARD';\n }\n }\n return null;\n}\n\nfunction generateQR() {\n const data = buildData();\n if (!data) {\n alert('Veuillez remplir les champs obligatoires avant de g\u00e9n\u00e9rer le QR code.');\n return;\n }\n\n const size = parseInt(document.getElementById('size-input').value);\n const dark = document.getElementById('color-dark').value;\n const light = document.getElementById('color-light').value;\n const ecMap = { L: QRCode.CorrectLevel.L, M: QRCode.CorrectLevel.M, Q: QRCode.CorrectLevel.Q, H: QRCode.CorrectLevel.H };\n const ec = ecMap[document.getElementById('ec-level').value];\n\n const output = document.getElementById('qr-output');\n output.innerHTML = '';\n\n new QRCode(output, { text: data, width: size, height: size, colorDark: dark, colorLight: light, correctLevel: ec });\n\n document.getElementById('qr-zone').classList.add('ready');\n\n \/\/ Afficher data info\n const maxLen = 90;\n document.getElementById('qr-info-text').textContent = data.length > maxLen ? data.substring(0, maxLen) + '\u2026' : data;\n document.getElementById('qr-info').classList.add('visible');\n\n \/\/ Boutons DL\n document.getElementById('dl-png').classList.add('visible');\n document.getElementById('dl-svg').classList.add('visible');\n}\n\nfunction getCanvas() { return document.querySelector('#qr-output canvas'); }\n\nfunction downloadPNG() {\n const c = getCanvas();\n if (!c) return;\n const a = document.createElement('a');\n a.download = 'qrcode-moncollege.png';\n a.href = c.toDataURL('image\/png');\n a.click();\n}\n\nfunction downloadSVG() {\n const c = getCanvas();\n if (!c) return;\n const size = c.width;\n const svg = `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"${size}\" height=\"${size}\" viewBox=\"0 0 ${size} ${size}\">\n <image href=\"${c.toDataURL('image\/png')}\" width=\"${size}\" height=\"${size}\"\/>\n<\/svg>`;\n const a = document.createElement('a');\n a.download = 'qrcode-moncollege.svg';\n a.href = URL.createObjectURL(new Blob([svg], { type: 'image\/svg+xml' }));\n a.click();\n}\n\ndocument.getElementById('url-input').addEventListener('keydown', e => {\n if (e.key === 'Enter') generateQR();\n});\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>G\u00e9n\u00e9rateur de QR Code Ath\u00e9na G\u00e9n\u00e9rateur de QR Code Ath\u00e9na Cr\u00e9ez facilement des QR codes pour vos communications scolaires, vos affichages, vos supports p\u00e9dagogiques. Configuration du QR Code \ud83d\udd17 URL \ud83d\udcdd Texte \u2709\ufe0f Email \ud83d\udcde T\u00e9l\u00e9phone \ud83d\udcf6 Wi-Fi \ud83d\udc64 Contact Adresse web (URL) Texte libre Adresse email Sujet Corps du message Num\u00e9ro de t\u00e9l\u00e9phone Nom […]<\/p>\n","protected":false},"author":11,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-7872","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/moncollege-valdoise.fr\/index.php\/wp-json\/wp\/v2\/pages\/7872","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/moncollege-valdoise.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/moncollege-valdoise.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/moncollege-valdoise.fr\/index.php\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/moncollege-valdoise.fr\/index.php\/wp-json\/wp\/v2\/comments?post=7872"}],"version-history":[{"count":1,"href":"https:\/\/moncollege-valdoise.fr\/index.php\/wp-json\/wp\/v2\/pages\/7872\/revisions"}],"predecessor-version":[{"id":7873,"href":"https:\/\/moncollege-valdoise.fr\/index.php\/wp-json\/wp\/v2\/pages\/7872\/revisions\/7873"}],"wp:attachment":[{"href":"https:\/\/moncollege-valdoise.fr\/index.php\/wp-json\/wp\/v2\/media?parent=7872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":7872,"date":"2026-03-01T21:31:01","date_gmt":"2026-03-01T20:31:01","guid":{"rendered":"https:\/\/moncollege-valdoise.fr\/?page_id=7872"},"modified":"2026-03-01T21:31:01","modified_gmt":"2026-03-01T20:31:01","slug":"athena-qr-code","status":"publish","type":"page","link":"https:\/\/moncollege-valdoise.fr\/index.php\/athena-qr-code\/","title":{"rendered":"Ath\u00e9na QR code"},"content":{"rendered":"\n\n\n\n\n\nG\u00e9n\u00e9rateur de QR Code Ath\u00e9na<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@400;600;700;800&family=Open+Sans:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/qrcodejs\/1.0.0\/qrcode.min.js\"><\/script>\n<style>\n :root {\n \/* Couleurs extraites visuellement du site moncollege-valdoise.fr *\/\n --bleu-header: #1b2a4a; \/* bleu marine tr\u00e8s fonc\u00e9 \u2014 header & footer *\/\n --bleu-nav: #223560; \/* bleu navigation secondaire *\/\n --bleu-lien: #2d5fa6; \/* liens et \u00e9l\u00e9ments actifs *\/\n --bleu-clair: #dce8f5; \/* fond bleu tr\u00e8s l\u00e9ger *\/\n --orange: #e8630a; \/* orange vif \u2014 accent principal & boutons CTA *\/\n --orange-hover: #d45a07;\n --orange-clair: #fff0e6;\n --gris-fond: #f2f4f7;\n --gris-bord: #d4dae6;\n --gris-texte: #3d4a5c;\n --gris-muted: #7a8499;\n --texte: #1c2333;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n body {\n font-family: 'Open Sans', Arial, sans-serif;\n background: var(--gris-fond);\n color: var(--texte);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n HEADER\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .site-header {\n background: var(--bleu-header);\n padding: 0 40px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n min-height: 70px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.3);\n flex-wrap: wrap;\n gap: 12px;\n }\n\n .header-left {\n display: flex;\n align-items: center;\n gap: 0;\n }\n\n .logo-vdo {\n display: flex;\n align-items: center;\n gap: 12px;\n text-decoration: none;\n padding-right: 22px;\n border-right: 1px solid rgba(255,255,255,0.2);\n margin-right: 22px;\n }\n\n .logo-emblem {\n width: 42px;\n height: 42px;\n background: rgba(255,255,255,0.12);\n border: 1px solid rgba(255,255,255,0.25);\n border-radius: 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Nunito', sans-serif;\n font-size: 9px;\n font-weight: 800;\n color: white;\n line-height: 1.2;\n text-align: center;\n letter-spacing: 0.04em;\n flex-shrink: 0;\n }\n\n .logo-text-block { color: white; line-height: 1.18; }\n .logo-text-block .mon-college {\n font-family: 'Nunito', sans-serif;\n font-size: 20px;\n font-weight: 800;\n display: block;\n }\n .logo-text-block .val-doise {\n font-size: 10.5px;\n font-weight: 400;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n opacity: 0.72;\n display: block;\n }\n\n .header-tool {\n color: rgba(255,255,255,0.88);\n font-size: 14.5px;\n font-weight: 600;\n }\n\n .btn-connect {\n background: var(--orange);\n color: white;\n border: none;\n border-radius: 5px;\n padding: 9px 17px;\n font-family: 'Open Sans', sans-serif;\n font-size: 13px;\n font-weight: 700;\n cursor: pointer;\n text-decoration: none;\n transition: background 0.18s;\n display: inline-flex;\n align-items: center;\n gap: 7px;\n }\n .btn-connect:hover { background: var(--orange-hover); }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NAVIGATION\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .site-nav {\n background: var(--bleu-nav);\n padding: 0 40px;\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n border-bottom: 3px solid var(--orange);\n }\n\n .nav-item {\n color: rgba(255,255,255,0.78);\n text-decoration: none;\n font-size: 13.5px;\n font-weight: 600;\n padding: 13px 17px;\n display: block;\n transition: color 0.15s, background 0.15s;\n position: relative;\n }\n .nav-item:hover { color: white; background: rgba(255,255,255,0.08); }\n .nav-item.active {\n color: white;\n background: rgba(255,255,255,0.12);\n }\n .nav-item.active::after {\n content: '';\n position: absolute;\n bottom: -3px; left: 0; right: 0;\n height: 3px;\n background: var(--orange);\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BREADCRUMB\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .breadcrumb {\n background: white;\n border-bottom: 1px solid var(--gris-bord);\n padding: 10px 40px;\n font-size: 12.5px;\n color: var(--gris-muted);\n display: flex;\n align-items: center;\n gap: 7px;\n }\n .breadcrumb a { color: var(--bleu-lien); text-decoration: none; }\n .breadcrumb a:hover { text-decoration: underline; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CONTENU PRINCIPAL\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .main-content {\n flex: 1;\n padding: 34px 40px;\n max-width: 1100px;\n margin: 0 auto;\n width: 100%;\n }\n\n .page-head { margin-bottom: 28px; }\n\n .page-head h1 {\n font-family: 'Nunito', sans-serif;\n font-size: 27px;\n font-weight: 800;\n color: var(--bleu-header);\n margin-bottom: 7px;\n display: flex;\n align-items: center;\n gap: 13px;\n }\n\n .h1-icon {\n width: 38px; height: 38px;\n background: var(--orange);\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .page-head p {\n color: var(--gris-texte);\n font-size: 14.5px;\n line-height: 1.65;\n max-width: 620px;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n GRILLE 2 COLONNES\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .app-grid {\n display: grid;\n grid-template-columns: 1fr 358px;\n gap: 24px;\n align-items: start;\n }\n\n @media (max-width: 820px) {\n .app-grid { grid-template-columns: 1fr; }\n .site-header, .site-nav, .breadcrumb, .main-content { padding-left: 18px; padding-right: 18px; }\n .site-header { padding-top: 14px; padding-bottom: 14px; }\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CARTE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .card {\n background: white;\n border: 1px solid var(--gris-bord);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n overflow: hidden;\n }\n\n .card-header {\n background: var(--bleu-header);\n color: white;\n padding: 14px 22px;\n font-family: 'Nunito', sans-serif;\n font-size: 15px;\n font-weight: 700;\n display: flex;\n align-items: center;\n gap: 9px;\n letter-spacing: 0.01em;\n }\n\n .card-body { padding: 24px 22px; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n ONGLETS TYPE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .type-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-bottom: 24px;\n }\n\n .type-tab {\n background: var(--gris-fond);\n border: 1.5px solid var(--gris-bord);\n border-radius: 20px;\n color: var(--gris-texte);\n cursor: pointer;\n font-family: 'Open Sans', sans-serif;\n font-size: 12.5px;\n font-weight: 600;\n padding: 6px 14px;\n transition: all 0.16s;\n white-space: nowrap;\n }\n .type-tab:hover { border-color: var(--bleu-lien); color: var(--bleu-lien); background: var(--bleu-clair); }\n .type-tab.active { background: var(--bleu-lien); border-color: var(--bleu-lien); color: white; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FORMULAIRES\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .form-section { display: none; }\n .form-section.active { display: block; }\n\n .field { margin-bottom: 17px; }\n .field:last-child { margin-bottom: 0; }\n\n .field > label, label.field-label {\n display: block;\n font-size: 11.5px;\n font-weight: 700;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: var(--bleu-header);\n margin-bottom: 7px;\n }\n\n input[type=\"text\"], textarea, select {\n width: 100%;\n background: white;\n border: 1.5px solid var(--gris-bord);\n border-radius: 6px;\n color: var(--texte);\n font-family: 'Open Sans', sans-serif;\n font-size: 14px;\n padding: 10px 13px;\n outline: none;\n transition: border-color 0.2s, box-shadow 0.2s;\n }\n input[type=\"text\"]:focus, textarea:focus, select:focus {\n border-color: var(--bleu-lien);\n box-shadow: 0 0 0 3px rgba(45,95,166,0.13);\n }\n textarea { resize: vertical; min-height: 82px; }\n select {\n appearance: none;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237a8499'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 13px center;\n padding-right: 34px;\n cursor: pointer;\n }\n\n .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n\n .divider {\n border: none;\n border-top: 1px solid var(--gris-bord);\n margin: 22px 0 20px;\n }\n\n .sub-section-title {\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--gris-muted);\n margin-bottom: 15px;\n }\n\n \/* Slider *\/\n .slider-row { display: flex; align-items: center; gap: 13px; }\n input[type=\"range\"] { flex: 1; accent-color: var(--bleu-lien); cursor: pointer; }\n .slider-val {\n min-width: 54px;\n text-align: right;\n font-size: 13px;\n font-weight: 700;\n color: var(--bleu-lien);\n }\n\n \/* Couleurs *\/\n .color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n .color-field > label {\n display: block;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: var(--gris-muted);\n margin-bottom: 6px;\n }\n input[type=\"color\"] {\n width: 100%;\n height: 42px;\n border: 1.5px solid var(--gris-bord);\n border-radius: 6px;\n padding: 4px 5px;\n cursor: pointer;\n background: white;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BOUTON G\u00c9N\u00c9RER\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .btn-generate {\n width: 100%;\n background: var(--orange);\n border: none;\n border-radius: 6px;\n color: white;\n cursor: pointer;\n font-family: 'Nunito', sans-serif;\n font-size: 16px;\n font-weight: 800;\n letter-spacing: 0.03em;\n padding: 14px 20px;\n margin-top: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 9px;\n transition: background 0.18s, transform 0.12s, box-shadow 0.18s;\n box-shadow: 0 3px 10px rgba(232,99,10,0.35);\n }\n .btn-generate:hover { background: var(--orange-hover); transform: translateY(-1px); box-shadow: 0 5px 14px rgba(232,99,10,0.4); }\n .btn-generate:active { transform: none; box-shadow: none; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n APER\u00c7U\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .preview-sticky { position: sticky; top: 20px; }\n\n .qr-zone {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 265px;\n padding: 18px;\n background: var(--gris-fond);\n border: 2px dashed var(--gris-bord);\n border-radius: 8px;\n margin-bottom: 15px;\n transition: border-color 0.3s, background 0.3s;\n }\n .qr-zone.ready { background: white; border-style: solid; border-color: var(--bleu-clair); }\n\n #qr-output { display: flex; align-items: center; justify-content: center; }\n #qr-output canvas, #qr-output img { max-width: 100%; display: block; border-radius: 4px; }\n\n .placeholder-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 13px;\n color: var(--gris-muted);\n font-size: 13px;\n text-align: center;\n padding: 20px;\n line-height: 1.55;\n }\n\n .placeholder-state svg { opacity: 0.2; }\n\n \/* Info data *\/\n .qr-data-info {\n background: var(--bleu-clair);\n border: 1px solid #b5cfe8;\n border-radius: 6px;\n padding: 10px 13px;\n font-size: 12px;\n color: var(--bleu-header);\n word-break: break-all;\n line-height: 1.5;\n margin-bottom: 13px;\n display: none;\n gap: 8px;\n align-items: flex-start;\n }\n .qr-data-info.visible { display: flex; }\n .qr-data-info svg { flex-shrink: 0; color: var(--bleu-lien); margin-top: 1px; }\n\n \/* Boutons DL *\/\n .dl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n\n .btn-dl {\n background: white;\n border: 2px solid var(--bleu-lien);\n border-radius: 6px;\n color: var(--bleu-lien);\n cursor: pointer;\n font-family: 'Open Sans', sans-serif;\n font-size: 13px;\n font-weight: 700;\n padding: 10px 8px;\n display: none;\n align-items: center;\n justify-content: center;\n gap: 6px;\n transition: all 0.16s;\n }\n .btn-dl:hover { background: var(--bleu-lien); color: white; }\n .btn-dl.visible { display: flex; }\n\n \/* Astuce *\/\n .tip-box {\n background: var(--orange-clair);\n border-left: 4px solid var(--orange);\n border-radius: 0 6px 6px 0;\n padding: 12px 15px;\n font-size: 12.5px;\n color: #7a3500;\n margin-top: 17px;\n line-height: 1.55;\n display: flex;\n gap: 10px;\n align-items: flex-start;\n }\n .tip-box svg { flex-shrink: 0; color: var(--orange); margin-top: 2px; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOOTER\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .site-footer {\n background: var(--bleu-header);\n color: rgba(255,255,255,0.55);\n font-size: 12.5px;\n padding: 20px 40px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 12px;\n margin-top: auto;\n }\n\n .footer-brand {\n display: flex;\n align-items: center;\n gap: 9px;\n color: rgba(255,255,255,0.9);\n font-family: 'Nunito', sans-serif;\n font-weight: 700;\n font-size: 14px;\n }\n\n .footer-links { display: flex; gap: 18px; flex-wrap: wrap; }\n .footer-links a {\n color: rgba(255,255,255,0.5);\n text-decoration: none;\n font-size: 12px;\n transition: color 0.15s;\n }\n .footer-links a:hover { color: white; }\n\n .footer-copy { color: rgba(255,255,255,0.35); font-size: 12px; }\n<\/style>\n<\/head>\n<body>\n\n\n<main class=\"main-content\">\n\n <div class=\"page-head\">\n <h1>\n <span class=\"h1-icon\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2.5\">\n <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/>\n <rect x=\"5\" y=\"5\" width=\"3\" height=\"3\" fill=\"white\" stroke=\"none\"\/>\n <rect x=\"16\" y=\"5\" width=\"3\" height=\"3\" fill=\"white\" stroke=\"none\"\/>\n <rect x=\"5\" y=\"16\" width=\"3\" height=\"3\" fill=\"white\" stroke=\"none\"\/>\n <rect x=\"14\" y=\"14\" width=\"2\" height=\"2\" fill=\"white\" stroke=\"none\"\/>\n <rect x=\"18\" y=\"14\" width=\"3\" height=\"3\" fill=\"white\" stroke=\"none\"\/>\n <rect x=\"14\" y=\"18\" width=\"3\" height=\"3\" fill=\"white\" stroke=\"none\"\/>\n <\/svg>\n <\/span>\n G\u00e9n\u00e9rateur de QR Code Ath\u00e9na\n <\/h1>\n <p>Cr\u00e9ez facilement des QR codes pour vos communications scolaires, vos affichages, vos supports p\u00e9dagogiques.<\/p>\n <\/div>\n\n <div class=\"app-grid\">\n\n \n <div class=\"card\">\n <div class=\"card-header\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\n <path d=\"M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z\"\/>\n <\/svg>\n Configuration du QR Code\n <\/div>\n\n <div class=\"card-body\">\n\n \n <div class=\"type-tabs\">\n <button class=\"type-tab active\" onclick=\"switchTab('url',this)\">\ud83d\udd17 URL<\/button>\n <button class=\"type-tab\" onclick=\"switchTab('text',this)\">\ud83d\udcdd Texte<\/button>\n <button class=\"type-tab\" onclick=\"switchTab('email',this)\">\u2709\ufe0f Email<\/button>\n <button class=\"type-tab\" onclick=\"switchTab('tel',this)\">\ud83d\udcde T\u00e9l\u00e9phone<\/button>\n <button class=\"type-tab\" onclick=\"switchTab('wifi',this)\">\ud83d\udcf6 Wi-Fi<\/button>\n <button class=\"type-tab\" onclick=\"switchTab('vcard',this)\">\ud83d\udc64 Contact<\/button>\n <\/div>\n\n \n <div class=\"form-section active\" id=\"tab-url\">\n <div class=\"field\">\n <label>Adresse web (URL)<\/label>\n <input type=\"text\" id=\"url-input\" placeholder=\"https:\/\/moncollege-valdoise.fr\" \/>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\" id=\"tab-text\">\n <div class=\"field\">\n <label>Texte libre<\/label>\n <textarea id=\"text-input\" placeholder=\"Entrez votre texte ici...\"><\/textarea>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\" id=\"tab-email\">\n <div class=\"field\">\n <label>Adresse email<\/label>\n <input type=\"text\" id=\"email-to\" placeholder=\"contact@college.fr\" \/>\n <\/div>\n <div class=\"field\">\n <label>Sujet<\/label>\n <input type=\"text\" id=\"email-subject\" placeholder=\"Sujet de l'email\" \/>\n <\/div>\n <div class=\"field\">\n <label>Corps du message<\/label>\n <textarea id=\"email-body\" placeholder=\"Message...\"><\/textarea>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\" id=\"tab-tel\">\n <div class=\"field\">\n <label>Num\u00e9ro de t\u00e9l\u00e9phone<\/label>\n <input type=\"text\" id=\"tel-input\" placeholder=\"+33 1 34 25 30 30\" \/>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\" id=\"tab-wifi\">\n <div class=\"field\">\n <label>Nom du r\u00e9seau (SSID)<\/label>\n <input type=\"text\" id=\"wifi-ssid\" placeholder=\"College-WiFi\" \/>\n <\/div>\n <div class=\"field\">\n <label>Mot de passe<\/label>\n <input type=\"text\" id=\"wifi-pass\" placeholder=\"motdepasse\" \/>\n <\/div>\n <div class=\"field\">\n <label>Type de s\u00e9curit\u00e9<\/label>\n <select id=\"wifi-sec\">\n <option value=\"WPA\">WPA \/ WPA2<\/option>\n <option value=\"WEP\">WEP<\/option>\n <option value=\"\">Aucune (r\u00e9seau ouvert)<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\" id=\"tab-vcard\">\n <div class=\"two-col\">\n <div class=\"field\">\n <label>Pr\u00e9nom<\/label>\n <input type=\"text\" id=\"vc-prenom\" placeholder=\"Jean\" \/>\n <\/div>\n <div class=\"field\">\n <label>Nom<\/label>\n <input type=\"text\" id=\"vc-nom\" placeholder=\"Dupont\" \/>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>T\u00e9l\u00e9phone<\/label>\n <input type=\"text\" id=\"vc-tel\" placeholder=\"+33 6 12 34 56 78\" \/>\n <\/div>\n <div class=\"field\">\n <label>Email<\/label>\n <input type=\"text\" id=\"vc-email\" placeholder=\"jean.dupont@college.fr\" \/>\n <\/div>\n <div class=\"field\">\n <label>\u00c9tablissement<\/label>\n <input type=\"text\" id=\"vc-org\" placeholder=\"Coll\u00e8ge Val d'Oise\" \/>\n <\/div>\n <\/div>\n\n \n <hr class=\"divider\">\n <p class=\"sub-section-title\">Apparence<\/p>\n\n <div class=\"field\">\n <label>Taille du QR Code<\/label>\n <div class=\"slider-row\">\n <input type=\"range\" id=\"size-input\" min=\"128\" max=\"512\" step=\"16\" value=\"256\"\n oninput=\"document.getElementById('size-val').textContent = this.value + ' px'\">\n <span class=\"slider-val\" id=\"size-val\">256 px<\/span>\n <\/div>\n <\/div>\n\n <div class=\"field\">\n <label>Niveau de correction d’erreur<\/label>\n <select id=\"ec-level\">\n <option value=\"L\">L \u2013 Faible (7 %) \u2014 petits QR codes<\/option>\n <option value=\"M\" selected>M \u2013 Moyen (15 %) \u2014 usage g\u00e9n\u00e9ral<\/option>\n <option value=\"Q\">Q \u2013 Quartile (25 %)<\/option>\n <option value=\"H\">H \u2013 \u00c9lev\u00e9 (30 %) \u2014 affichage \/ impression<\/option>\n <\/select>\n <\/div>\n\n <div class=\"field\">\n <label>Couleurs<\/label>\n <div class=\"color-grid\">\n <div class=\"color-field\">\n <label>Couleur principale<\/label>\n <input type=\"color\" id=\"color-dark\" value=\"#1b2a4a\">\n <\/div>\n <div class=\"color-field\">\n <label>Couleur de fond<\/label>\n <input type=\"color\" id=\"color-light\" value=\"#ffffff\">\n <\/div>\n <\/div>\n <\/div>\n\n <button class=\"btn-generate\" onclick=\"generateQR()\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"\/>\n <\/svg>\n G\u00e9n\u00e9rer le QR Code\n <\/button>\n\n <\/div>\n <\/div>\n\n \n <div class=\"preview-sticky\">\n <div class=\"card\">\n <div class=\"card-header\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/>\n <\/svg>\n Aper\u00e7u\n <\/div>\n <div class=\"card-body\">\n\n <div class=\"qr-zone\" id=\"qr-zone\">\n <div id=\"qr-output\">\n <div class=\"placeholder-state\">\n \n <svg width=\"72\" height=\"72\" viewBox=\"0 0 80 80\" fill=\"none\" stroke=\"#1b2a4a\" stroke-width=\"3.5\">\n <rect x=\"4\" y=\"4\" width=\"30\" height=\"30\" rx=\"2\"\/>\n <rect x=\"46\" y=\"4\" width=\"30\" height=\"30\" rx=\"2\"\/>\n <rect x=\"4\" y=\"46\" width=\"30\" height=\"30\" rx=\"2\"\/>\n <rect x=\"11\" y=\"11\" width=\"16\" height=\"16\" fill=\"#1b2a4a\" stroke=\"none\"\/>\n <rect x=\"53\" y=\"11\" width=\"16\" height=\"16\" fill=\"#1b2a4a\" stroke=\"none\"\/>\n <rect x=\"11\" y=\"53\" width=\"16\" height=\"16\" fill=\"#1b2a4a\" stroke=\"none\"\/>\n <rect x=\"46\" y=\"46\" width=\"8\" height=\"8\" fill=\"#1b2a4a\" stroke=\"none\"\/>\n <rect x=\"60\" y=\"46\" width=\"16\" height=\"16\" rx=\"1\" fill=\"#1b2a4a\" stroke=\"none\"\/>\n <rect x=\"46\" y=\"60\" width=\"16\" height=\"16\" rx=\"1\" fill=\"#1b2a4a\" stroke=\"none\"\/>\n <\/svg>\n Configurez les options<br>puis cliquez sur<br><strong>G\u00e9n\u00e9rer le QR Code<\/strong>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"qr-data-info\" id=\"qr-info\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/>\n <\/svg>\n <span id=\"qr-info-text\"><\/span>\n <\/div>\n\n <div class=\"dl-row\">\n <button class=\"btn-dl\" id=\"dl-png\" onclick=\"downloadPNG()\">\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <path d=\"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/>\n <\/svg>\n PNG\n <\/button>\n <button class=\"btn-dl\" id=\"dl-svg\" onclick=\"downloadSVG()\">\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <path d=\"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/>\n <\/svg>\n SVG\n <\/button>\n <\/div>\n\n <div class=\"tip-box\">\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/>\n <\/svg>\n <span>Pour vos affiches et impressions, choisissez une taille <strong>400 px ou plus<\/strong> et le niveau de correction <strong>H (\u00c9lev\u00e9)<\/strong>.<\/span>\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n<\/main>\n\n\n\n<script>\nlet currentTab = 'url';\n\nfunction switchTab(tab, btn) {\n document.querySelectorAll('.type-tab').forEach(t => t.classList.remove('active'));\n btn.classList.add('active');\n document.querySelectorAll('.form-section').forEach(s => s.classList.remove('active'));\n document.getElementById('tab-' + tab).classList.add('active');\n currentTab = tab;\n}\n\nfunction buildData() {\n switch (currentTab) {\n case 'url': {\n return document.getElementById('url-input').value.trim() || null;\n }\n case 'text': {\n return document.getElementById('text-input').value.trim() || null;\n }\n case 'email': {\n const to = document.getElementById('email-to').value.trim();\n if (!to) return null;\n const sub = encodeURIComponent(document.getElementById('email-subject').value.trim());\n const body = encodeURIComponent(document.getElementById('email-body').value.trim());\n return `mailto:${to}?subject=${sub}&body=${body}`;\n }\n case 'tel': {\n const v = document.getElementById('tel-input').value.trim();\n return v ? `tel:${v.replace(\/\\s\/g, '')}` : null;\n }\n case 'wifi': {\n const ssid = document.getElementById('wifi-ssid').value.trim();\n if (!ssid) return null;\n const pass = document.getElementById('wifi-pass').value.trim();\n const sec = document.getElementById('wifi-sec').value;\n return `WIFI:T:${sec};S:${ssid};P:${pass};;`;\n }\n case 'vcard': {\n const prenom = document.getElementById('vc-prenom').value.trim();\n const nom = document.getElementById('vc-nom').value.trim();\n const name = [prenom, nom].filter(Boolean).join(' ');\n if (!name) return null;\n const tel = document.getElementById('vc-tel').value.trim();\n const email = document.getElementById('vc-email').value.trim();\n const org = document.getElementById('vc-org').value.trim();\n let v = `BEGIN:VCARD\\nVERSION:3.0\\nFN:${name}\\nN:${nom};${prenom};;;\\n`;\n if (tel) v += `TEL;TYPE=WORK:${tel}\\n`;\n if (email) v += `EMAIL:${email}\\n`;\n if (org) v += `ORG:${org}\\n`;\n return v + 'END:VCARD';\n }\n }\n return null;\n}\n\nfunction generateQR() {\n const data = buildData();\n if (!data) {\n alert('Veuillez remplir les champs obligatoires avant de g\u00e9n\u00e9rer le QR code.');\n return;\n }\n\n const size = parseInt(document.getElementById('size-input').value);\n const dark = document.getElementById('color-dark').value;\n const light = document.getElementById('color-light').value;\n const ecMap = { L: QRCode.CorrectLevel.L, M: QRCode.CorrectLevel.M, Q: QRCode.CorrectLevel.Q, H: QRCode.CorrectLevel.H };\n const ec = ecMap[document.getElementById('ec-level').value];\n\n const output = document.getElementById('qr-output');\n output.innerHTML = '';\n\n new QRCode(output, { text: data, width: size, height: size, colorDark: dark, colorLight: light, correctLevel: ec });\n\n document.getElementById('qr-zone').classList.add('ready');\n\n \/\/ Afficher data info\n const maxLen = 90;\n document.getElementById('qr-info-text').textContent = data.length > maxLen ? data.substring(0, maxLen) + '\u2026' : data;\n document.getElementById('qr-info').classList.add('visible');\n\n \/\/ Boutons DL\n document.getElementById('dl-png').classList.add('visible');\n document.getElementById('dl-svg').classList.add('visible');\n}\n\nfunction getCanvas() { return document.querySelector('#qr-output canvas'); }\n\nfunction downloadPNG() {\n const c = getCanvas();\n if (!c) return;\n const a = document.createElement('a');\n a.download = 'qrcode-moncollege.png';\n a.href = c.toDataURL('image\/png');\n a.click();\n}\n\nfunction downloadSVG() {\n const c = getCanvas();\n if (!c) return;\n const size = c.width;\n const svg = `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"${size}\" height=\"${size}\" viewBox=\"0 0 ${size} ${size}\">\n <image href=\"${c.toDataURL('image\/png')}\" width=\"${size}\" height=\"${size}\"\/>\n<\/svg>`;\n const a = document.createElement('a');\n a.download = 'qrcode-moncollege.svg';\n a.href = URL.createObjectURL(new Blob([svg], { type: 'image\/svg+xml' }));\n a.click();\n}\n\ndocument.getElementById('url-input').addEventListener('keydown', e => {\n if (e.key === 'Enter') generateQR();\n});\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>G\u00e9n\u00e9rateur de QR Code Ath\u00e9na G\u00e9n\u00e9rateur de QR Code Ath\u00e9na Cr\u00e9ez facilement des QR codes pour vos communications scolaires, vos affichages, vos supports p\u00e9dagogiques. Configuration du QR Code \ud83d\udd17 URL \ud83d\udcdd Texte \u2709\ufe0f Email \ud83d\udcde T\u00e9l\u00e9phone \ud83d\udcf6 Wi-Fi \ud83d\udc64 Contact Adresse web (URL) Texte libre Adresse email Sujet Corps du message Num\u00e9ro de t\u00e9l\u00e9phone Nom […]<\/p>\n","protected":false},"author":11,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-7872","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/moncollege-valdoise.fr\/index.php\/wp-json\/wp\/v2\/pages\/7872","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/moncollege-valdoise.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/moncollege-valdoise.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/moncollege-valdoise.fr\/index.php\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/moncollege-valdoise.fr\/index.php\/wp-json\/wp\/v2\/comments?post=7872"}],"version-history":[{"count":1,"href":"https:\/\/moncollege-valdoise.fr\/index.php\/wp-json\/wp\/v2\/pages\/7872\/revisions"}],"predecessor-version":[{"id":7873,"href":"https:\/\/moncollege-valdoise.fr\/index.php\/wp-json\/wp\/v2\/pages\/7872\/revisions\/7873"}],"wp:attachment":[{"href":"https:\/\/moncollege-valdoise.fr\/index.php\/wp-json\/wp\/v2\/media?parent=7872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}