Snow Profile \u2014 Profil Stratigraphique<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600&display=swap\" rel=\"stylesheet\"\/>\n<style>\n:root {\n --bg: #f4f3ef;\n --surface: #ffffff;\n --surface2: #f9f8f5;\n --border: #e0ddd5;\n --text: #1a1915;\n --text2: #6b6860;\n --text3: #9e9b94;\n --blue: #2563a8;\n --blue-light: #dbeafe;\n --red: #c0392b;\n --red-light: #fde8e6;\n --orange: #d35400;\n --green: #2d6a2d;\n --accent: #1a1915;\n --mono: 'DM Mono', monospace;\n --sans: 'DM Sans', sans-serif;\n}\n* { box-sizing: border-box; margin: 0; padding: 0; }\nbody {\n font-family: var(--sans);\n background: var(--bg);\n color: var(--text);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}<\/p>\n<p>\/* \u2500\u2500 HEADER \u2500\u2500 *\/\nheader {\n background: var(--text);\n color: white;\n padding: 14px 24px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n}\nheader h1 {\n font-family: var(--mono);\n font-size: 15px;\n font-weight: 500;\n letter-spacing: 0.04em;\n}\nheader .subtitle { font-size: 11px; opacity: 0.5; margin-top: 2px; }\n.header-actions { display: flex; gap: 8px; }\n.btn {\n padding: 7px 14px; border-radius: 6px; font-size: 12px; font-weight: 500;\n cursor: pointer; border: none; font-family: var(--sans); transition: all 0.15s;\n}\n.btn-ghost { background: rgba(255,255,255,0.1); color: white; }\n.btn-ghost:hover { background: rgba(255,255,255,0.2); }\n.btn-primary { background: white; color: var(--text); }\n.btn-primary:hover { background: #f0efeb; }\n.btn-danger { background: var(--red-light); color: var(--red); }\n.btn-danger:hover { background: #fbd5d1; }<\/p>\n<p>\/* \u2500\u2500 MAIN LAYOUT \u2500\u2500 *\/\nmain {\n flex: 1;\n display: grid;\n grid-template-columns: 320px 1fr;\n gap: 0;\n overflow: hidden;\n}<\/p>\n<p>\/* \u2500\u2500 LEFT PANEL \u2500\u2500 *\/\n.panel {\n background: var(--surface);\n border-right: 1px solid var(--border);\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n max-height: calc(100vh - 52px);\n}\n.panel-section {\n padding: 18px 20px;\n border-bottom: 1px solid var(--border);\n}\n.panel-section h2 {\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--text3);\n margin-bottom: 12px;\n}<\/p>\n<p>\/* Meta fields *\/\n.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n.field { display: flex; flex-direction: column; gap: 4px; }\n.field.full { grid-column: 1\/-1; }\n.field label { font-size: 10px; font-weight: 500; color: var(--text3); letter-spacing: 0.04em; text-transform: uppercase; }\n.field input, .field select {\n padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px;\n font-size: 13px; font-family: var(--sans); background: var(--surface2);\n color: var(--text); outline: none; transition: border 0.15s;\n}\n.field input:focus, .field select:focus { border-color: var(--blue); background: white; }<\/p>\n<p>\/* Layer list *\/\n.layer-list { display: flex; flex-direction: column; gap: 6px; }\n.layer-card {\n border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;\n background: var(--surface2); cursor: pointer; transition: all 0.15s;\n display: flex; align-items: center; gap: 10px;\n}\n.layer-card:hover { border-color: var(--blue); }\n.layer-card.selected { border-color: var(--blue); background: var(--blue-light); }\n.layer-card.dh { border-left: 3px solid var(--orange); }\n.layer-swatch {\n width: 14px; border-radius: 3px; flex-shrink: 0;\n border: 1px solid rgba(0,0,0,0.15);\n}\n.layer-info { flex: 1; min-width: 0; }\n.layer-info .range { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--blue); }\n.layer-info .desc { font-size: 11px; color: var(--text2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.layer-del {\n width: 22px; height: 22px; border-radius: 4px; border: none;\n background: transparent; color: var(--text3); cursor: pointer; font-size: 14px;\n display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n}\n.layer-del:hover { background: var(--red-light); color: var(--red); }<\/p>\n<p>\/* Layer form *\/\n.layer-form { display: flex; flex-direction: column; gap: 8px; }\n.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n.hardness-select { display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; }\n.h-btn {\n padding: 6px 2px; border: 1px solid var(--border); border-radius: 5px;\n background: var(--surface2); font-size: 11px; font-weight: 500;\n cursor: pointer; transition: all 0.12s; text-align: center; font-family: var(--mono);\n}\n.h-btn:hover { border-color: var(--blue); color: var(--blue); }\n.h-btn.active { background: var(--blue); border-color: var(--blue); color: white; }<\/p>\n<p>.grain-select { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; }\n.g-btn {\n padding: 6px 4px; border: 1px solid var(--border); border-radius: 5px;\n background: var(--surface2); font-size: 13px; cursor: pointer;\n transition: all 0.12s; text-align: center;\n}\n.g-btn:hover { border-color: var(--blue); }\n.g-btn.active { background: var(--blue-light); border-color: var(--blue); }<\/p>\n<p>\/* Tests *\/\n.test-list { display: flex; flex-direction: column; gap: 6px; }\n.test-item {\n display: flex; align-items: center; gap: 8px;\n background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px;\n}\n.test-item input { width: 50px; }\n.test-item select { flex: 1; }\n.test-type { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--red); min-width: 36px; }<\/p>\n<p>\/* \u2500\u2500 RIGHT PANEL (profile view) \u2500\u2500 *\/\n.profile-view {\n background: var(--bg);\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n padding: 24px;\n gap: 16px;\n}\n.profile-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 12px;\n padding: 24px;\n overflow-x: auto;\n}\n.profile-card h3 {\n font-family: var(--mono);\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.06em;\n color: var(--text3);\n text-transform: uppercase;\n margin-bottom: 16px;\n}<\/p>\n<p>\/* Tabs in left panel *\/\n.tab-bar { display: flex; border-bottom: 1px solid var(--border); }\n.tab-btn {\n flex: 1; padding: 10px 8px; font-size: 11px; font-weight: 500;\n border: none; background: transparent; cursor: pointer; color: var(--text3);\n border-bottom: 2px solid transparent; transition: all 0.15s; margin-bottom: -1px;\n}\n.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); }<\/p>\n<p>.tab-content { display: none; }\n.tab-content.active { display: block; }<\/p>\n<p>\/* warning badge *\/\n.warn {\n display: inline-flex; align-items: center; gap: 5px;\n background: var(--red-light); color: var(--red);\n font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 4px;\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<header>\n<div>\n<h1>\u2744 SNOW PROFILE<\/h1>\n<div class=\"subtitle\">Profil Stratigraphique de Neige<\/div>\n<\/p><\/div>\n<div class=\"header-actions\">\n <button class=\"btn btn-ghost\" onclick=\"importPhoto()\">\ud83d\udcf7 Importer photo<\/button><br \/>\n <button class=\"btn btn-ghost\" onclick=\"exportSVG()\">\u2b07 SVG<\/button><br \/>\n <button class=\"btn btn-primary\" onclick=\"exportPNG()\">\u2b07 PNG<\/button>\n <\/div>\n<\/header>\n<p><main><br \/>\n <\/p>\n<div class=\"panel\">\n<div class=\"tab-bar\">\n <button class=\"tab-btn active\" onclick=\"switchTab('meta')\">Infos<\/button><br \/>\n <button class=\"tab-btn\" onclick=\"switchTab('layers')\">Couches<\/button><br \/>\n <button class=\"tab-btn\" onclick=\"switchTab('tests')\">Tests<\/button>\n <\/div>\n<p> <\/p>\n<div class=\"tab-content active panel-section\" id=\"tab-meta\">\n<h2>Informations du site<\/h2>\n<div class=\"field-grid\">\n<div class=\"field full\"><label>Lieu<\/label><input id=\"m-lieu\" value=\"28BN\" oninput=\"render()\"\/><\/div>\n<div class=\"field\"><label>Date<\/label><input id=\"m-date\" value=\"07.05.26\" oninput=\"render()\"\/><\/div>\n<div class=\"field\"><label>Altitude (m)<\/label><input id=\"m-alt\" value=\"2000\" oninput=\"render()\"\/><\/div>\n<div class=\"field\"><label>Orientation<\/label><br \/>\n <select id=\"m-aspect\" onchange=\"render()\"><option>N<\/option><option>NE<\/option><option>E<\/option><option>SE<\/option><option>S<\/option><option>SW<\/option><option>W<\/option><option>NW<\/option><\/select>\n <\/div>\n<div class=\"field\"><label>Inclinaison (\u00b0)<\/label><input id=\"m-slope\" value=\"35\" oninput=\"render()\"\/><\/div>\n<div class=\"field\"><label>Hauteur totale (cm)<\/label><input id=\"m-hs\" type=\"number\" value=\"100\" oninput=\"render()\"\/><\/div>\n<div class=\"field\"><label>Temp. surface (\u00b0C)<\/label><input id=\"m-ts\" value=\"-0.2\" oninput=\"render()\"\/><\/div>\n<div class=\"field\"><label>Temp. air (\u00b0C)<\/label><input id=\"m-ta\" value=\"-0.7\" oninput=\"render()\"\/><\/div>\n<div class=\"field full\"><label>Observateur<\/label><input id=\"m-obs\" value=\"\" placeholder=\"Nom\" oninput=\"render()\"\/><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"tab-content\" id=\"tab-layers\">\n<div class=\"panel-section\">\n<h2>Couches <span style=\"font-size:10px;color:var(--text3);font-weight:400\">(bas \u2192 haut)<\/span><\/h2>\n<div class=\"layer-list\" id=\"layerList\"><\/div>\n<p> <button class=\"btn btn-primary\" style=\"width:100%;margin-top:10px;background:var(--surface2);color:var(--text);border:1px solid var(--border)\" onclick=\"addLayer()\">+ Ajouter une couche<\/button>\n <\/div>\n<div class=\"panel-section\" id=\"layerFormWrap\" style=\"display:none\">\n<h2>\u00c9diter la couche<\/h2>\n<div class=\"layer-form\">\n<div class=\"form-row\">\n<div class=\"field\"><label>H bas (cm)<\/label><input id=\"lf-hbot\" type=\"number\" oninput=\"updateLayer()\"\/><\/div>\n<div class=\"field\"><label>H haut (cm)<\/label><input id=\"lf-htop\" type=\"number\" oninput=\"updateLayer()\"\/><\/div>\n<\/p><\/div>\n<div class=\"field\"><label>Duret\u00e9<\/label><\/p>\n<div class=\"hardness-select\" id=\"hardnessBtns\">\n <button class=\"h-btn\" data-h=\"1\" onclick=\"setH(1)\">F<br \/><span style=\"font-size:9px;opacity:.6\">1<\/span><\/button><br \/>\n <button class=\"h-btn\" data-h=\"2\" onclick=\"setH(2)\">4F<br \/><span style=\"font-size:9px;opacity:.6\">2<\/span><\/button><br \/>\n <button class=\"h-btn\" data-h=\"3\" onclick=\"setH(3)\">1F<br \/><span style=\"font-size:9px;opacity:.6\">3<\/span><\/button><br \/>\n <button class=\"h-btn\" data-h=\"4\" onclick=\"setH(4)\">P<br \/><span style=\"font-size:9px;opacity:.6\">4<\/span><\/button><br \/>\n <button class=\"h-btn\" data-h=\"5\" onclick=\"setH(5)\">K<br \/><span style=\"font-size:9px;opacity:.6\">5<\/span><\/button>\n <\/div>\n<\/p><\/div>\n<div class=\"field\"><label>Type de grains<\/label><\/p>\n<div class=\"grain-select\" id=\"grainBtns\">\n <button class=\"g-btn\" data-g=\"PP\" onclick=\"setG('PP')\" title=\"Pr\u00e9cipitation\">\u2726<\/button><br \/>\n <button class=\"g-btn\" data-g=\"DF\" onclick=\"setG('DF')\" title=\"D\u00e9compos\u00e9\">DF<\/button><br \/>\n <button class=\"g-btn\" data-g=\"RG\" onclick=\"setG('RG')\" title=\"Grains ronds\">\u25cb<\/button><br \/>\n <button class=\"g-btn\" data-g=\"FC\" onclick=\"setG('FC')\" title=\"Facett\u00e9s\">\u2227<\/button><br \/>\n <button class=\"g-btn\" data-g=\"DH\" onclick=\"setG('DH')\" title=\"Givre profondeur\">\u2299<\/button><br \/>\n <button class=\"g-btn\" data-g=\"SH\" onclick=\"setG('SH')\" title=\"Givre surface\">SH<\/button><br \/>\n <button class=\"g-btn\" data-g=\"MF\" onclick=\"setG('MF')\" title=\"Fondue\">MF<\/button><br \/>\n <button class=\"g-btn\" data-g=\"IF\" onclick=\"setG('IF')\" title=\"Glace\">IF<\/button>\n <\/div>\n<\/p><\/div>\n<div class=\"form-row\">\n<div class=\"field\"><label>Taille grains (mm)<\/label><input id=\"lf-size\" placeholder=\"1-2\" oninput=\"updateLayer()\"\/><\/div>\n<div class=\"field\"><label>Humidit\u00e9<\/label><br \/>\n <select id=\"lf-wet\" onchange=\"updateLayer()\"><option value=\"D\">D \u2014 Sec<\/option><option value=\"M\">M \u2014 Humide<\/option><option value=\"W\">W \u2014 Mouill\u00e9<\/option><\/select>\n <\/div>\n<\/p><\/div>\n<div class=\"field\"><label>Note<\/label><input id=\"lf-note\" placeholder=\"Observation\u2026\" oninput=\"updateLayer()\"\/><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"tab-content\" id=\"tab-tests\">\n<div class=\"panel-section\">\n<h2>Tests de stabilit\u00e9<\/h2>\n<div class=\"test-list\" id=\"testList\"><\/div>\n<div style=\"display:flex;gap:6px;margin-top:10px\">\n <button class=\"btn\" style=\"flex:1;background:var(--surface2);border:1px solid var(--border);font-size:11px\" onclick=\"addTest('CT')\">+ CT<\/button><br \/>\n <button class=\"btn\" style=\"flex:1;background:var(--surface2);border:1px solid var(--border);font-size:11px\" onclick=\"addTest('ECT')\">+ ECT<\/button><br \/>\n <button class=\"btn\" style=\"flex:1;background:var(--surface2);border:1px solid var(--border);font-size:11px\" onclick=\"addTest('RB')\">+ RB<\/button>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"profile-view\">\n<div class=\"profile-card\">\n<h3>Profil stratigraphique<\/h3>\n<div id=\"svgWrap\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p><\/main><\/p>\n<p><input type=\"file\" id=\"photoInput\" accept=\"image\/*\" style=\"display:none\" onchange=\"handlePhoto(this)\"\/><\/p>\n<p><script>\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ STATE\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nlet layers = [\n { hbot:0, htop:50, hardness:1, grain:'FC', size:'1-2', wet:'D', note:'' },\n { hbot:50, htop:52, hardness:4.5, grain:'DH', size:'', wet:'D', note:'Couche fragile' },\n { hbot:52, htop:55, hardness:1, grain:'FC', size:'1-2', wet:'D', note:'' },\n { hbot:55, htop:65, hardness:1.5, grain:'RG', size:'', wet:'D', note:'' },\n { hbot:65, htop:100,hardness:1, grain:'PP', size:'', wet:'D', note:'' },\n];\nlet tests = [\n { type:'CT', score:1, fracture:'SP', height:95 },\n { type:'CT', score:12, fracture:'SP', height:65 },\n { type:'ECTN',score:null,fracture:'N', height:null },\n];\nlet selectedLayer = null;<\/p>\n<p>\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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\/\/ HARDNESS SCALE\n\/\/ W = 290 \/ 2^(5-H)\n\/\/ H=1 \u2192 290\/16=18.1\n\/\/ H=2 \u2192 290\/8=36.25\n\/\/ H=3 \u2192 290\/4=72.5\n\/\/ H=4 \u2192 290\/2=145\n\/\/ H=5 \u2192 290\/1=290\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction hardnessWidth(h) {\n return 290 \/ Math.pow(2, 5 - h);\n}<\/p>\n<p>const GRAIN_COLORS = {\n PP: '#d4e9f7', DF: '#c8e6c9', RG: '#c8e6c9',\n FC: '#b3d4ed', DH: '#f5c6b8', SH: '#ffe9b3',\n MF: '#d4c5e8', IF: '#cfe8f7'\n};\nconst GRAIN_SYM = { PP:'\u2726', DF:'DF', RG:'\u25cb', FC:'\u2227', DH:'\u2299', SH:'SH', MF:'MF', IF:'IF' };\nconst GRAIN_STROKE = {\n PP:'#5b9dc9', DF:'#4caf50', RG:'#4caf50',\n FC:'#2563a8', DH:'#d35400', SH:'#c49a00',\n MF:'#7b5ea7', IF:'#3b8dbf'\n};\nconst H_LABELS = { 1:'F', 1.5:'F+', 2:'4F', 2.5:'4F+', 3:'1F', 3.5:'1F+', 4:'P', 4.5:'P+', 5:'K' };<\/p>\n<p>\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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\/\/ SVG RENDER\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction render() {\n renderLayerList();\n renderTestList();\n renderSVG();\n}<\/p>\n<p>function renderSVG() {\n const HS = parseFloat(document.getElementById('m-hs').value) || 100;\n \/\/ SVG dimensions\n const W = 720, H_SVG = 580;\n const AXIS_X = 400; \/\/ height axis x position\n const BAR_RIGHT = AXIS_X; \/\/ bars anchor right here\n const MAX_BAR = 290; \/\/ full width for K(5)\n const Y_TOP = 60;\n const Y_BOT = 460;\n const PX_PER_CM = (Y_BOT - Y_TOP) \/ HS;<\/p>\n<p> function yOf(cm) { return Y_BOT - cm * PX_PER_CM; }<\/p>\n<p> \/\/ Hardness grid x positions (from AXIS_X leftward)\n \/\/ H=1\u219218, H=2\u219236, H=3\u219273, H=4\u2192145, H=5\u2192290\n const hGrid = [1,2,3,4,5].map(h => ({ h, x: AXIS_X - hardnessWidth(h) }));<\/p>\n<p> let svg = `<svg id=\"profileSVG\" width=\"${W}\" viewBox=\"0 0 ${W} ${H_SVG}\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" font-family=\"'DM Mono','Courier New',monospace\">`;<\/p>\n<p> \/\/ defs\n svg += `<defs>`;\n Object.entries(GRAIN_COLORS).forEach(([k,c]) => {\n const sc = GRAIN_STROKE[k];\n \/\/ diagonal hatch\n svg += `<pattern id=\"pat${k}\" patternUnits=\"userSpaceOnUse\" width=\"5\" height=\"5\" patternTransform=\"rotate(45)\">\n <line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"5\" stroke=\"${sc}\" stroke-width=\"1\" opacity=\"0.35\"\/>\n <\/pattern>`;\n });\n svg += `<\/defs>`;<\/p>\n<p> \/\/ background\n svg += `<rect x=\"${AXIS_X-MAX_BAR}\" y=\"${Y_TOP}\" width=\"${MAX_BAR}\" height=\"${Y_BOT-Y_TOP}\" fill=\"#f8f7f4\"\/>`;<\/p>\n<p> \/\/ Vertical hardness grid lines\n hGrid.forEach(({h, x}) => {\n svg += `<line x1=\"${x}\" y1=\"${Y_TOP-12}\" x2=\"${x}\" y2=\"${Y_BOT+4}\" stroke=\"#b8d4e8\" stroke-width=\"0.6\" stroke-dasharray=\"3,3\"\/>`;\n });<\/p>\n<p> \/\/ Horizontal grid every 10cm\n for (let cm = 0; cm <= HS; cm += 10) {\n const y = yOf(cm);\n svg += `<line x1=\"${AXIS_X-MAX_BAR}\" y1=\"${y}\" x2=\"${AXIS_X}\" y2=\"${y}\" stroke=\"#ddd\" stroke-width=\"${cm % 50 === 0 ? 0.8 : 0.4}\"\/>`;\n }<\/p>\n<p> \/\/ \u2500\u2500 LAYERS \u2500\u2500\n layers.forEach(l => {\n const y1 = yOf(l.htop), y2 = yOf(l.hbot);\n const layH = y2 - y1;\n const bw = hardnessWidth(l.hardness);\n const bx = AXIS_X - bw;\n const fill = GRAIN_COLORS[l.grain] || '#cce';\n const stroke = GRAIN_STROKE[l.grain] || '#555';<\/p>\n<p> \/\/ filled rect\n svg += `<rect x=\"${bx}\" y=\"${y1}\" width=\"${bw}\" height=\"${layH}\" fill=\"${fill}\" stroke=\"${stroke}\" stroke-width=\"1.2\"\/>`;\n \/\/ texture overlay\n svg += `<rect x=\"${bx}\" y=\"${y1}\" width=\"${bw}\" height=\"${layH}\" fill=\"url(#pat${l.grain})\" opacity=\"0.5\"\/>`;<\/p>\n<p> \/\/ grain symbol centered in bar\n const sym = GRAIN_SYM[l.grain] || '?';\n const midY = (y1 + y2) \/ 2;\n if (layH > 10) {\n svg += `<text x=\"${bx + bw\/2}\" y=\"${midY + 5}\" font-size=\"${Math.min(16, layH*0.5)}\" fill=\"${stroke}\" text-anchor=\"middle\" opacity=\"0.7\">${sym}<\/text>`;\n }\n });<\/p>\n<p> \/\/ \u2500\u2500 HEIGHT AXIS \u2500\u2500\n svg += `<line x1=\"${AXIS_X}\" y1=\"${Y_TOP}\" x2=\"${AXIS_X}\" y2=\"${Y_BOT+4}\" stroke=\"#1a1915\" stroke-width=\"1.5\"\/>`;<\/p>\n<p> \/\/ Tick marks and labels\n for (let cm = 0; cm <= HS; cm += (HS <= 50 ? 5 : 10)) {\n const y = yOf(cm);\n const major = cm % (HS <= 50 ? 10 : 20) === 0;\n svg += `<line x1=\"${AXIS_X}\" y1=\"${y}\" x2=\"${AXIS_X + (major?10:6)}\" y2=\"${y}\" stroke=\"#1a1915\" stroke-width=\"${major?1.2:0.8}\"\/>`;\n if (major) {\n svg += `<text x=\"${AXIS_X+14}\" y=\"${y+4}\" font-size=\"10\" fill=\"#444\">${cm}<\/text>`;\n }\n }\n svg += `<text x=\"${AXIS_X+14}\" y=\"${Y_TOP-8}\" font-size=\"10\" fill=\"#2563a8\" font-weight=\"500\">H (cm)<\/text>`;<\/p>\n<p> \/\/ Layer boundary lines + labels on right\n const COL1 = AXIS_X + 55; \/\/ grain form\n const COL2 = AXIS_X + 90; \/\/ size\n const COL3 = AXIS_X + 120; \/\/ wet\n const COL4 = AXIS_X + 150; \/\/ hardness label\n const COL5 = AXIS_X + 195; \/\/ tests & notes<\/p>\n<p> \/\/ Column headers\n svg += `<text x=\"${COL1}\" y=\"${Y_TOP-12}\" font-size=\"8\" fill=\"#888\" text-anchor=\"middle\">Form<\/text>`;\n svg += `<text x=\"${COL2}\" y=\"${Y_TOP-12}\" font-size=\"8\" fill=\"#888\" text-anchor=\"middle\">Size<\/text>`;\n svg += `<text x=\"${COL3}\" y=\"${Y_TOP-12}\" font-size=\"8\" fill=\"#888\" text-anchor=\"middle\">Wet<\/text>`;\n svg += `<text x=\"${COL4}\" y=\"${Y_TOP-12}\" font-size=\"8\" fill=\"#888\" text-anchor=\"middle\">Hard.<\/text>`;\n svg += `<text x=\"${COL5}\" y=\"${Y_TOP-12}\" font-size=\"8\" fill=\"#888\">Tests & Notes<\/text>`;<\/p>\n<p> \/\/ Vertical column separators\n [COL1-18, COL2-15, COL3-15, COL4-18, COL5-22].forEach(cx => {\n svg += `<line x1=\"${cx}\" y1=\"${Y_TOP}\" x2=\"${cx}\" y2=\"${Y_BOT}\" stroke=\"#e0ddd5\" stroke-width=\"0.5\"\/>`;\n });<\/p>\n<p> layers.forEach(l => {\n const y1 = yOf(l.htop), y2 = yOf(l.hbot);\n const midY = (y1 + y2) \/ 2 + 4;<\/p>\n<p> \/\/ horizontal separator at bottom of each layer\n svg += `<line x1=\"${AXIS_X}\" y1=\"${y2}\" x2=\"${COL5+150}\" y2=\"${y2}\" stroke=\"#e0ddd5\" stroke-width=\"0.4\"\/>`;<\/p>\n<p> const sym = GRAIN_SYM[l.grain] || '';\n const stroke = GRAIN_STROKE[l.grain] || '#555';\n svg += `<text x=\"${COL1}\" y=\"${midY}\" font-size=\"13\" fill=\"${stroke}\" text-anchor=\"middle\">${sym}<\/text>`;\n svg += `<text x=\"${COL2}\" y=\"${midY}\" font-size=\"9\" fill=\"#555\" text-anchor=\"middle\">${l.size||'\u2014'}<\/text>`;\n svg += `<text x=\"${COL3}\" y=\"${midY}\" font-size=\"9\" fill=\"#555\" text-anchor=\"middle\">${l.wet}<\/text>`;\n const hl = H_LABELS[l.hardness] || String(l.hardness);\n const hcolor = l.hardness >= 4 ? '#c0392b' : '#1a1915';\n svg += `<text x=\"${COL4}\" y=\"${midY}\" font-size=\"9.5\" fill=\"${hcolor}\" text-anchor=\"middle\" font-weight=\"500\">${hl}<\/text>`;\n if (l.note) {\n svg += `<text x=\"${COL5}\" y=\"${midY}\" font-size=\"8.5\" fill=\"#888\">${l.note}<\/text>`;\n }\n });<\/p>\n<p> \/\/ \u2500\u2500 TESTS on profile \u2500\u2500\n tests.forEach(t => {\n if (t.height == null) return;\n const y = yOf(t.height);\n const label = t.type + (t.score != null ? t.score : '') + (t.fracture ? ' '+t.fracture : '');\n svg += `<line x1=\"${AXIS_X-MAX_BAR-5}\" y1=\"${y}\" x2=\"${COL5+150}\" y2=\"${y}\" stroke=\"#c0392b\" stroke-width=\"0.8\" stroke-dasharray=\"4,3\" opacity=\"0.7\"\/>`;\n svg += `<text x=\"${COL5}\" y=\"${y-2}\" font-size=\"8.5\" fill=\"#c0392b\" font-weight=\"500\">\u2190 ${label} @${t.height}cm<\/text>`;\n });<\/p>\n<p> \/\/ \u2500\u2500 HARDNESS SCALE BOTTOM \u2500\u2500\n const Y_SCALE = Y_BOT + 20;\n svg += `<line x1=\"${AXIS_X-MAX_BAR}\" y1=\"${Y_BOT}\" x2=\"${AXIS_X}\" y2=\"${Y_BOT}\" stroke=\"#1a1915\" stroke-width=\"1\"\/>`;\n hGrid.forEach(({h, x}) => {\n svg += `<line x1=\"${x}\" y1=\"${Y_BOT}\" x2=\"${x}\" y2=\"${Y_BOT+7}\" stroke=\"#2563a8\" stroke-width=\"1\"\/>`;\n const labels = {1:'F',2:'4F',3:'1F',4:'P',5:'K'};\n svg += `<text x=\"${x}\" y=\"${Y_SCALE+5}\" font-size=\"9\" fill=\"#2563a8\" text-anchor=\"middle\">${labels[h]}<\/text>`;\n });\n svg += `<text x=\"${AXIS_X}\" y=\"${Y_SCALE+5}\" font-size=\"9\" fill=\"#2563a8\" text-anchor=\"middle\">\u2192<\/text>`;\n svg += `<text x=\"${(AXIS_X-MAX_BAR+AXIS_X)\/2}\" y=\"${Y_SCALE+18}\" font-size=\"8\" fill=\"#888\" text-anchor=\"middle\">\u2190 harder \u00b7 softer \u2192<\/text>`;<\/p>\n<p> \/\/ \u2500\u2500 META TOP LEFT \u2500\u2500\n const lieu = document.getElementById('m-lieu').value;\n const date = document.getElementById('m-date').value;\n const alt = document.getElementById('m-alt').value;\n const aspect = document.getElementById('m-aspect').value;\n const slope = document.getElementById('m-slope').value;\n const ts = document.getElementById('m-ts').value;\n const ta = document.getElementById('m-ta').value;\n const obs = document.getElementById('m-obs').value;<\/p>\n<p> const MX = 10, MY = 16;\n svg += `<text x=\"${MX}\" y=\"${MY}\" font-size=\"9\" fill=\"#888\" font-weight=\"500\">LIEU:<\/text>`;\n svg += `<text x=\"${MX}\" y=\"${MY+14}\" font-size=\"14\" fill=\"#2563a8\" font-weight=\"500\">${lieu}<\/text>`;\n svg += `<text x=\"${MX}\" y=\"${MY+30}\" font-size=\"9\" fill=\"#888\">Date: <tspan fill=\"#1a1915\">${date}<\/tspan><\/text>`;\n svg += `<text x=\"${MX}\" y=\"${MY+44}\" font-size=\"9\" fill=\"#888\">Alt: <tspan fill=\"#1a1915\">${alt} m<\/tspan> ${aspect} ${slope}\u00b0<\/text>`;\n svg += `<text x=\"${MX}\" y=\"${MY+58}\" font-size=\"9\" fill=\"#888\">Surf: <tspan fill=\"#1a1915\">${ts}\u00b0C<\/tspan> Air: <tspan fill=\"#1a1915\">${ta}\u00b0C<\/tspan><\/text>`;\n if (obs) svg += `<text x=\"${MX}\" y=\"${MY+72}\" font-size=\"8.5\" fill=\"#888\">${obs}<\/text>`;<\/p>\n<p> \/\/ Warning if DH present\n const hasDH = layers.some(l => l.grain === 'DH');\n if (hasDH) {\n svg += `<rect x=\"${MX}\" y=\"${MY+82}\" width=\"100\" height=\"16\" rx=\"3\" fill=\"#fde8e6\"\/>`;\n svg += `<text x=\"${MX+6}\" y=\"${MY+94}\" font-size=\"8.5\" fill=\"#c0392b\" font-weight=\"600\">\u26a0 DH \u2014 Couche fragile<\/text>`;\n }<\/p>\n<p> svg += `<\/svg>`;\n document.getElementById('svgWrap').innerHTML = svg;\n}<\/p>\n<p>\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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\/\/ LAYER LIST\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction renderLayerList() {\n const el = document.getElementById('layerList');\n el.innerHTML = [...layers].reverse().map((l, ri) => {\n const i = layers.length - 1 - ri;\n const sel = selectedLayer === i ? ' selected' : '';\n const isDH = l.grain === 'DH' ? ' dh' : '';\n const bw = Math.round(hardnessWidth(l.hardness));\n const hl = H_LABELS[l.hardness] || l.hardness;\n const c = GRAIN_COLORS[l.grain] || '#ccc';\n const sc = GRAIN_STROKE[l.grain] || '#666';\n const sym = GRAIN_SYM[l.grain] || '?';\n return `<\/p>\n<div class=\"layer-card${sel}${isDH}\" onclick=\"selectLayer(${i})\">\n<div class=\"layer-swatch\" style=\"height:${Math.max(18,Math.min(40,l.htop-l.hbot)*0.8)}px;background:${c};border-color:${sc}\"><\/div>\n<div class=\"layer-info\">\n<div class=\"range\">${l.hbot}\u2013${l.htop} cm<\/div>\n<div class=\"desc\">${sym} ${l.grain} \u00b7 ${hl} \u00b7 ${bw}px wide${l.note ? ' \u00b7 '+l.note : ''}<\/div>\n<\/p><\/div>\n<p> <button class=\"layer-del\" onclick=\"event.stopPropagation();deleteLayer(${i})\">\u00d7<\/button>\n <\/div>\n<p>`;\n }).join('');\n}<\/p>\n<p>function selectLayer(i) {\n selectedLayer = i;\n const l = layers[i];\n document.getElementById('layerFormWrap').style.display = 'block';\n document.getElementById('lf-hbot').value = l.hbot;\n document.getElementById('lf-htop').value = l.htop;\n document.getElementById('lf-size').value = l.size;\n document.getElementById('lf-wet').value = l.wet;\n document.getElementById('lf-note').value = l.note;\n \/\/ hardness btns\n document.querySelectorAll('.h-btn').forEach(b => {\n b.classList.toggle('active', parseFloat(b.dataset.h) === Math.round(l.hardness));\n });\n \/\/ grain btns\n document.querySelectorAll('.g-btn').forEach(b => {\n b.classList.toggle('active', b.dataset.g === l.grain);\n });\n render();\n}<\/p>\n<p>function setH(h) {\n if (selectedLayer == null) return;\n layers[selectedLayer].hardness = h;\n document.querySelectorAll('.h-btn').forEach(b => b.classList.toggle('active', parseFloat(b.dataset.h) === h));\n render();\n}\nfunction setG(g) {\n if (selectedLayer == null) return;\n layers[selectedLayer].grain = g;\n document.querySelectorAll('.g-btn').forEach(b => b.classList.toggle('active', b.dataset.g === g));\n render();\n}\nfunction updateLayer() {\n if (selectedLayer == null) return;\n const l = layers[selectedLayer];\n l.hbot = parseFloat(document.getElementById('lf-hbot').value) || 0;\n l.htop = parseFloat(document.getElementById('lf-htop').value) || 0;\n l.size = document.getElementById('lf-size').value;\n l.wet = document.getElementById('lf-wet').value;\n l.note = document.getElementById('lf-note').value;\n render();\n}\nfunction addLayer() {\n const maxTop = Math.max(...layers.map(l => l.htop), 0);\n layers.push({ hbot: maxTop, htop: maxTop+10, hardness:1, grain:'PP', size:'', wet:'D', note:'' });\n selectedLayer = layers.length - 1;\n switchTab('layers');\n render();\n selectLayer(selectedLayer);\n}\nfunction deleteLayer(i) {\n layers.splice(i, 1);\n if (selectedLayer >= layers.length) selectedLayer = null;\n if (layers.length === 0) document.getElementById('layerFormWrap').style.display = 'none';\n render();\n}<\/p>\n<p>\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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\/\/ TEST LIST\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction renderTestList() {\n const el = document.getElementById('testList');\n el.innerHTML = tests.map((t, i) => {\n return `<\/p>\n<div class=\"test-item\">\n <span class=\"test-type\">${t.type}<\/span>\n <input style=\"width:44px;padding:5px 6px;border:1px solid var(--border);border-radius:5px;font-family:var(--mono);font-size:12px\"\n value=\"${t.score ?? ''}\" placeholder=\"score\" oninput=\"tests[${i}].score=this.value?+this.value:null;render()\"\/>\n <select style=\"flex:1;padding:5px 6px;border:1px solid var(--border);border-radius:5px;font-size:12px\"\n onchange=\"tests[${i}].fracture=this.value;render()\">\n ${['SP','SC','P','B','N','RP','BRK'].map(f=>`<option${t.fracture===f?' selected':''}>${f}<\/option>`).join('')}\n <\/select>\n <input style=\"width:44px;padding:5px 6px;border:1px solid var(--border);border-radius:5px;font-family:var(--mono);font-size:12px\"\n value=\"${t.height ?? ''}\" placeholder=\"cm\" oninput=\"tests[${i}].height=this.value?+this.value:null;render()\"\/>\n <button class=\"layer-del\" onclick=\"tests.splice(${i},1);render()\">\u00d7<\/button>\n <\/div>\n<p>`;\n }).join('');\n}\nfunction addTest(type) {\n tests.push({ type, score: null, fracture: 'SP', height: null });\n render();\n}<\/p>\n<p>\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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\/\/ TABS\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction switchTab(name) {\n const tabs = ['meta','layers','tests'];\n tabs.forEach(t => {\n document.getElementById('tab-'+t).classList.toggle('active', t===name);\n });\n document.querySelectorAll('.tab-btn').forEach((b,i) => {\n b.classList.toggle('active', tabs[i]===name);\n });\n}<\/p>\n<p>\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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\/\/ EXPORT\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction exportSVG() {\n const svg = document.getElementById('profileSVG');\n if (!svg) return;\n const blob = new Blob([svg.outerHTML], {type:'image\/svg+xml'});\n const a = document.createElement('a');\n a.href = URL.createObjectURL(blob);\n a.download = 'snow_profile.svg';\n a.click();\n}<\/p>\n<p>function exportPNG() {\n const svg = document.getElementById('profileSVG');\n if (!svg) return;\n const xml = new XMLSerializer().serializeToString(svg);\n const img = new Image();\n const vb = svg.getAttribute('viewBox').split(' ');\n const W = parseFloat(vb[2]), H = parseFloat(vb[3]);\n img.onload = () => {\n const canvas = document.createElement('canvas');\n canvas.width = W * 2; canvas.height = H * 2;\n const ctx = canvas.getContext('2d');\n ctx.scale(2,2);\n ctx.fillStyle = 'white';\n ctx.fillRect(0,0,W,H);\n ctx.drawImage(img, 0, 0, W, H);\n const a = document.createElement('a');\n a.href = canvas.toDataURL('image\/png');\n a.download = 'snow_profile.png';\n a.click();\n };\n img.src = 'data:image\/svg+xml;base64,' + btoa(unescape(encodeURIComponent(xml)));\n}<\/p>\n<p>function importPhoto() {\n document.getElementById('photoInput').click();\n}\nasync function handlePhoto(input) {\n const file = input.files[0];\n if (!file) return;\n const b64 = await new Promise((res,rej)=>{\n const r = new FileReader();\n r.onload = () => res(r.result.split(',')[1]);\n r.onerror = rej;\n r.readAsDataURL(file);\n });\n alert('Analyse IA en cours... (n\u00e9cessite connexion API Anthropic)');\n \/\/ API call would go here \u2014 same as in the web app version\n}<\/p>\n<p>\/\/ \u2500\u2500 INIT \u2500\u2500\nrender();\n<\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Snow Profile \u2014 Profil Stratigraphique \u2744 SNOW PROFILE Profil Stratigraphique de Neige \ud83d\udcf7 Importer photo \u2b07 SVG \u2b07 PNG Infos […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-210","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>-<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sierra-risk.com\/?page_id=210\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"-\" \/>\n<meta property=\"og:description\" content=\"Snow Profile \u2014 Profil Stratigraphique \u2744 SNOW PROFILE Profil Stratigraphique de Neige \ud83d\udcf7 Importer photo \u2b07 SVG \u2b07 PNG Infos […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sierra-risk.com\/?page_id=210\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-07T07:52:03+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/sierra-risk.com\\\/?page_id=210\",\"url\":\"https:\\\/\\\/sierra-risk.com\\\/?page_id=210\",\"name\":\"-\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/sierra-risk.com\\\/#website\"},\"datePublished\":\"2026-05-07T07:52:02+00:00\",\"dateModified\":\"2026-05-07T07:52:03+00:00\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/sierra-risk.com\\\/?page_id=210\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/sierra-risk.com\\\/#website\",\"url\":\"https:\\\/\\\/sierra-risk.com\\\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/sierra-risk.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"}]}<\/script>\n","yoast_head_json":{"title":"-","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sierra-risk.com\/?page_id=210","og_locale":"fr_FR","og_type":"article","og_title":"-","og_description":"Snow Profile \u2014 Profil Stratigraphique \u2744 SNOW PROFILE Profil Stratigraphique de Neige \ud83d\udcf7 Importer photo \u2b07 SVG \u2b07 PNG Infos […]","og_url":"https:\/\/sierra-risk.com\/?page_id=210","article_modified_time":"2026-05-07T07:52:03+00:00","twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/sierra-risk.com\/?page_id=210","url":"https:\/\/sierra-risk.com\/?page_id=210","name":"-","isPartOf":{"@id":"https:\/\/sierra-risk.com\/#website"},"datePublished":"2026-05-07T07:52:02+00:00","dateModified":"2026-05-07T07:52:03+00:00","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sierra-risk.com\/?page_id=210"]}]},{"@type":"WebSite","@id":"https:\/\/sierra-risk.com\/#website","url":"https:\/\/sierra-risk.com\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sierra-risk.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"}]}},"_links":{"self":[{"href":"https:\/\/sierra-risk.com\/index.php?rest_route=\/wp\/v2\/pages\/210","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sierra-risk.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sierra-risk.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sierra-risk.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sierra-risk.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=210"}],"version-history":[{"count":1,"href":"https:\/\/sierra-risk.com\/index.php?rest_route=\/wp\/v2\/pages\/210\/revisions"}],"predecessor-version":[{"id":211,"href":"https:\/\/sierra-risk.com\/index.php?rest_route=\/wp\/v2\/pages\/210\/revisions\/211"}],"wp:attachment":[{"href":"https:\/\/sierra-risk.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":210,"date":"2026-05-07T08:52:02","date_gmt":"2026-05-07T07:52:02","guid":{"rendered":"https:\/\/sierra-risk.com\/?page_id=210"},"modified":"2026-05-07T08:52:03","modified_gmt":"2026-05-07T07:52:03","slug":"210-2","status":"publish","type":"page","link":"https:\/\/sierra-risk.com\/?page_id=210","title":{"rendered":""},"content":{"rendered":"

\n
\n
\n
\n
\nSnow Profile \u2014 Profil Stratigraphique<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600&display=swap\" rel=\"stylesheet\"\/>\n<style>\n:root {\n --bg: #f4f3ef;\n --surface: #ffffff;\n --surface2: #f9f8f5;\n --border: #e0ddd5;\n --text: #1a1915;\n --text2: #6b6860;\n --text3: #9e9b94;\n --blue: #2563a8;\n --blue-light: #dbeafe;\n --red: #c0392b;\n --red-light: #fde8e6;\n --orange: #d35400;\n --green: #2d6a2d;\n --accent: #1a1915;\n --mono: 'DM Mono', monospace;\n --sans: 'DM Sans', sans-serif;\n}\n* { box-sizing: border-box; margin: 0; padding: 0; }\nbody {\n font-family: var(--sans);\n background: var(--bg);\n color: var(--text);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}<\/p>\n<p>\/* \u2500\u2500 HEADER \u2500\u2500 *\/\nheader {\n background: var(--text);\n color: white;\n padding: 14px 24px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n}\nheader h1 {\n font-family: var(--mono);\n font-size: 15px;\n font-weight: 500;\n letter-spacing: 0.04em;\n}\nheader .subtitle { font-size: 11px; opacity: 0.5; margin-top: 2px; }\n.header-actions { display: flex; gap: 8px; }\n.btn {\n padding: 7px 14px; border-radius: 6px; font-size: 12px; font-weight: 500;\n cursor: pointer; border: none; font-family: var(--sans); transition: all 0.15s;\n}\n.btn-ghost { background: rgba(255,255,255,0.1); color: white; }\n.btn-ghost:hover { background: rgba(255,255,255,0.2); }\n.btn-primary { background: white; color: var(--text); }\n.btn-primary:hover { background: #f0efeb; }\n.btn-danger { background: var(--red-light); color: var(--red); }\n.btn-danger:hover { background: #fbd5d1; }<\/p>\n<p>\/* \u2500\u2500 MAIN LAYOUT \u2500\u2500 *\/\nmain {\n flex: 1;\n display: grid;\n grid-template-columns: 320px 1fr;\n gap: 0;\n overflow: hidden;\n}<\/p>\n<p>\/* \u2500\u2500 LEFT PANEL \u2500\u2500 *\/\n.panel {\n background: var(--surface);\n border-right: 1px solid var(--border);\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n max-height: calc(100vh - 52px);\n}\n.panel-section {\n padding: 18px 20px;\n border-bottom: 1px solid var(--border);\n}\n.panel-section h2 {\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--text3);\n margin-bottom: 12px;\n}<\/p>\n<p>\/* Meta fields *\/\n.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n.field { display: flex; flex-direction: column; gap: 4px; }\n.field.full { grid-column: 1\/-1; }\n.field label { font-size: 10px; font-weight: 500; color: var(--text3); letter-spacing: 0.04em; text-transform: uppercase; }\n.field input, .field select {\n padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px;\n font-size: 13px; font-family: var(--sans); background: var(--surface2);\n color: var(--text); outline: none; transition: border 0.15s;\n}\n.field input:focus, .field select:focus { border-color: var(--blue); background: white; }<\/p>\n<p>\/* Layer list *\/\n.layer-list { display: flex; flex-direction: column; gap: 6px; }\n.layer-card {\n border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;\n background: var(--surface2); cursor: pointer; transition: all 0.15s;\n display: flex; align-items: center; gap: 10px;\n}\n.layer-card:hover { border-color: var(--blue); }\n.layer-card.selected { border-color: var(--blue); background: var(--blue-light); }\n.layer-card.dh { border-left: 3px solid var(--orange); }\n.layer-swatch {\n width: 14px; border-radius: 3px; flex-shrink: 0;\n border: 1px solid rgba(0,0,0,0.15);\n}\n.layer-info { flex: 1; min-width: 0; }\n.layer-info .range { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--blue); }\n.layer-info .desc { font-size: 11px; color: var(--text2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.layer-del {\n width: 22px; height: 22px; border-radius: 4px; border: none;\n background: transparent; color: var(--text3); cursor: pointer; font-size: 14px;\n display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n}\n.layer-del:hover { background: var(--red-light); color: var(--red); }<\/p>\n<p>\/* Layer form *\/\n.layer-form { display: flex; flex-direction: column; gap: 8px; }\n.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n.hardness-select { display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; }\n.h-btn {\n padding: 6px 2px; border: 1px solid var(--border); border-radius: 5px;\n background: var(--surface2); font-size: 11px; font-weight: 500;\n cursor: pointer; transition: all 0.12s; text-align: center; font-family: var(--mono);\n}\n.h-btn:hover { border-color: var(--blue); color: var(--blue); }\n.h-btn.active { background: var(--blue); border-color: var(--blue); color: white; }<\/p>\n<p>.grain-select { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; }\n.g-btn {\n padding: 6px 4px; border: 1px solid var(--border); border-radius: 5px;\n background: var(--surface2); font-size: 13px; cursor: pointer;\n transition: all 0.12s; text-align: center;\n}\n.g-btn:hover { border-color: var(--blue); }\n.g-btn.active { background: var(--blue-light); border-color: var(--blue); }<\/p>\n<p>\/* Tests *\/\n.test-list { display: flex; flex-direction: column; gap: 6px; }\n.test-item {\n display: flex; align-items: center; gap: 8px;\n background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px;\n}\n.test-item input { width: 50px; }\n.test-item select { flex: 1; }\n.test-type { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--red); min-width: 36px; }<\/p>\n<p>\/* \u2500\u2500 RIGHT PANEL (profile view) \u2500\u2500 *\/\n.profile-view {\n background: var(--bg);\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n padding: 24px;\n gap: 16px;\n}\n.profile-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 12px;\n padding: 24px;\n overflow-x: auto;\n}\n.profile-card h3 {\n font-family: var(--mono);\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.06em;\n color: var(--text3);\n text-transform: uppercase;\n margin-bottom: 16px;\n}<\/p>\n<p>\/* Tabs in left panel *\/\n.tab-bar { display: flex; border-bottom: 1px solid var(--border); }\n.tab-btn {\n flex: 1; padding: 10px 8px; font-size: 11px; font-weight: 500;\n border: none; background: transparent; cursor: pointer; color: var(--text3);\n border-bottom: 2px solid transparent; transition: all 0.15s; margin-bottom: -1px;\n}\n.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); }<\/p>\n<p>.tab-content { display: none; }\n.tab-content.active { display: block; }<\/p>\n<p>\/* warning badge *\/\n.warn {\n display: inline-flex; align-items: center; gap: 5px;\n background: var(--red-light); color: var(--red);\n font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 4px;\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<header>\n<div>\n<h1>\u2744 SNOW PROFILE<\/h1>\n<div class=\"subtitle\">Profil Stratigraphique de Neige<\/div>\n<\/p><\/div>\n<div class=\"header-actions\">\n <button class=\"btn btn-ghost\" onclick=\"importPhoto()\">\ud83d\udcf7 Importer photo<\/button><br \/>\n <button class=\"btn btn-ghost\" onclick=\"exportSVG()\">\u2b07 SVG<\/button><br \/>\n <button class=\"btn btn-primary\" onclick=\"exportPNG()\">\u2b07 PNG<\/button>\n <\/div>\n<\/header>\n<p><main><br \/>\n <\/p>\n<div class=\"panel\">\n<div class=\"tab-bar\">\n <button class=\"tab-btn active\" onclick=\"switchTab('meta')\">Infos<\/button><br \/>\n <button class=\"tab-btn\" onclick=\"switchTab('layers')\">Couches<\/button><br \/>\n <button class=\"tab-btn\" onclick=\"switchTab('tests')\">Tests<\/button>\n <\/div>\n<p> <\/p>\n<div class=\"tab-content active panel-section\" id=\"tab-meta\">\n<h2>Informations du site<\/h2>\n<div class=\"field-grid\">\n<div class=\"field full\"><label>Lieu<\/label><input id=\"m-lieu\" value=\"28BN\" oninput=\"render()\"\/><\/div>\n<div class=\"field\"><label>Date<\/label><input id=\"m-date\" value=\"07.05.26\" oninput=\"render()\"\/><\/div>\n<div class=\"field\"><label>Altitude (m)<\/label><input id=\"m-alt\" value=\"2000\" oninput=\"render()\"\/><\/div>\n<div class=\"field\"><label>Orientation<\/label><br \/>\n <select id=\"m-aspect\" onchange=\"render()\"><option>N<\/option><option>NE<\/option><option>E<\/option><option>SE<\/option><option>S<\/option><option>SW<\/option><option>W<\/option><option>NW<\/option><\/select>\n <\/div>\n<div class=\"field\"><label>Inclinaison (\u00b0)<\/label><input id=\"m-slope\" value=\"35\" oninput=\"render()\"\/><\/div>\n<div class=\"field\"><label>Hauteur totale (cm)<\/label><input id=\"m-hs\" type=\"number\" value=\"100\" oninput=\"render()\"\/><\/div>\n<div class=\"field\"><label>Temp. surface (\u00b0C)<\/label><input id=\"m-ts\" value=\"-0.2\" oninput=\"render()\"\/><\/div>\n<div class=\"field\"><label>Temp. air (\u00b0C)<\/label><input id=\"m-ta\" value=\"-0.7\" oninput=\"render()\"\/><\/div>\n<div class=\"field full\"><label>Observateur<\/label><input id=\"m-obs\" value=\"\" placeholder=\"Nom\" oninput=\"render()\"\/><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"tab-content\" id=\"tab-layers\">\n<div class=\"panel-section\">\n<h2>Couches <span style=\"font-size:10px;color:var(--text3);font-weight:400\">(bas \u2192 haut)<\/span><\/h2>\n<div class=\"layer-list\" id=\"layerList\"><\/div>\n<p> <button class=\"btn btn-primary\" style=\"width:100%;margin-top:10px;background:var(--surface2);color:var(--text);border:1px solid var(--border)\" onclick=\"addLayer()\">+ Ajouter une couche<\/button>\n <\/div>\n<div class=\"panel-section\" id=\"layerFormWrap\" style=\"display:none\">\n<h2>\u00c9diter la couche<\/h2>\n<div class=\"layer-form\">\n<div class=\"form-row\">\n<div class=\"field\"><label>H bas (cm)<\/label><input id=\"lf-hbot\" type=\"number\" oninput=\"updateLayer()\"\/><\/div>\n<div class=\"field\"><label>H haut (cm)<\/label><input id=\"lf-htop\" type=\"number\" oninput=\"updateLayer()\"\/><\/div>\n<\/p><\/div>\n<div class=\"field\"><label>Duret\u00e9<\/label><\/p>\n<div class=\"hardness-select\" id=\"hardnessBtns\">\n <button class=\"h-btn\" data-h=\"1\" onclick=\"setH(1)\">F<br \/><span style=\"font-size:9px;opacity:.6\">1<\/span><\/button><br \/>\n <button class=\"h-btn\" data-h=\"2\" onclick=\"setH(2)\">4F<br \/><span style=\"font-size:9px;opacity:.6\">2<\/span><\/button><br \/>\n <button class=\"h-btn\" data-h=\"3\" onclick=\"setH(3)\">1F<br \/><span style=\"font-size:9px;opacity:.6\">3<\/span><\/button><br \/>\n <button class=\"h-btn\" data-h=\"4\" onclick=\"setH(4)\">P<br \/><span style=\"font-size:9px;opacity:.6\">4<\/span><\/button><br \/>\n <button class=\"h-btn\" data-h=\"5\" onclick=\"setH(5)\">K<br \/><span style=\"font-size:9px;opacity:.6\">5<\/span><\/button>\n <\/div>\n<\/p><\/div>\n<div class=\"field\"><label>Type de grains<\/label><\/p>\n<div class=\"grain-select\" id=\"grainBtns\">\n <button class=\"g-btn\" data-g=\"PP\" onclick=\"setG('PP')\" title=\"Pr\u00e9cipitation\">\u2726<\/button><br \/>\n <button class=\"g-btn\" data-g=\"DF\" onclick=\"setG('DF')\" title=\"D\u00e9compos\u00e9\">DF<\/button><br \/>\n <button class=\"g-btn\" data-g=\"RG\" onclick=\"setG('RG')\" title=\"Grains ronds\">\u25cb<\/button><br \/>\n <button class=\"g-btn\" data-g=\"FC\" onclick=\"setG('FC')\" title=\"Facett\u00e9s\">\u2227<\/button><br \/>\n <button class=\"g-btn\" data-g=\"DH\" onclick=\"setG('DH')\" title=\"Givre profondeur\">\u2299<\/button><br \/>\n <button class=\"g-btn\" data-g=\"SH\" onclick=\"setG('SH')\" title=\"Givre surface\">SH<\/button><br \/>\n <button class=\"g-btn\" data-g=\"MF\" onclick=\"setG('MF')\" title=\"Fondue\">MF<\/button><br \/>\n <button class=\"g-btn\" data-g=\"IF\" onclick=\"setG('IF')\" title=\"Glace\">IF<\/button>\n <\/div>\n<\/p><\/div>\n<div class=\"form-row\">\n<div class=\"field\"><label>Taille grains (mm)<\/label><input id=\"lf-size\" placeholder=\"1-2\" oninput=\"updateLayer()\"\/><\/div>\n<div class=\"field\"><label>Humidit\u00e9<\/label><br \/>\n <select id=\"lf-wet\" onchange=\"updateLayer()\"><option value=\"D\">D \u2014 Sec<\/option><option value=\"M\">M \u2014 Humide<\/option><option value=\"W\">W \u2014 Mouill\u00e9<\/option><\/select>\n <\/div>\n<\/p><\/div>\n<div class=\"field\"><label>Note<\/label><input id=\"lf-note\" placeholder=\"Observation\u2026\" oninput=\"updateLayer()\"\/><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"tab-content\" id=\"tab-tests\">\n<div class=\"panel-section\">\n<h2>Tests de stabilit\u00e9<\/h2>\n<div class=\"test-list\" id=\"testList\"><\/div>\n<div style=\"display:flex;gap:6px;margin-top:10px\">\n <button class=\"btn\" style=\"flex:1;background:var(--surface2);border:1px solid var(--border);font-size:11px\" onclick=\"addTest('CT')\">+ CT<\/button><br \/>\n <button class=\"btn\" style=\"flex:1;background:var(--surface2);border:1px solid var(--border);font-size:11px\" onclick=\"addTest('ECT')\">+ ECT<\/button><br \/>\n <button class=\"btn\" style=\"flex:1;background:var(--surface2);border:1px solid var(--border);font-size:11px\" onclick=\"addTest('RB')\">+ RB<\/button>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"profile-view\">\n<div class=\"profile-card\">\n<h3>Profil stratigraphique<\/h3>\n<div id=\"svgWrap\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p><\/main><\/p>\n<p><input type=\"file\" id=\"photoInput\" accept=\"image\/*\" style=\"display:none\" onchange=\"handlePhoto(this)\"\/><\/p>\n<p><script>\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ STATE\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nlet layers = [\n { hbot:0, htop:50, hardness:1, grain:'FC', size:'1-2', wet:'D', note:'' },\n { hbot:50, htop:52, hardness:4.5, grain:'DH', size:'', wet:'D', note:'Couche fragile' },\n { hbot:52, htop:55, hardness:1, grain:'FC', size:'1-2', wet:'D', note:'' },\n { hbot:55, htop:65, hardness:1.5, grain:'RG', size:'', wet:'D', note:'' },\n { hbot:65, htop:100,hardness:1, grain:'PP', size:'', wet:'D', note:'' },\n];\nlet tests = [\n { type:'CT', score:1, fracture:'SP', height:95 },\n { type:'CT', score:12, fracture:'SP', height:65 },\n { type:'ECTN',score:null,fracture:'N', height:null },\n];\nlet selectedLayer = null;<\/p>\n<p>\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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\/\/ HARDNESS SCALE\n\/\/ W = 290 \/ 2^(5-H)\n\/\/ H=1 \u2192 290\/16=18.1\n\/\/ H=2 \u2192 290\/8=36.25\n\/\/ H=3 \u2192 290\/4=72.5\n\/\/ H=4 \u2192 290\/2=145\n\/\/ H=5 \u2192 290\/1=290\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction hardnessWidth(h) {\n return 290 \/ Math.pow(2, 5 - h);\n}<\/p>\n<p>const GRAIN_COLORS = {\n PP: '#d4e9f7', DF: '#c8e6c9', RG: '#c8e6c9',\n FC: '#b3d4ed', DH: '#f5c6b8', SH: '#ffe9b3',\n MF: '#d4c5e8', IF: '#cfe8f7'\n};\nconst GRAIN_SYM = { PP:'\u2726', DF:'DF', RG:'\u25cb', FC:'\u2227', DH:'\u2299', SH:'SH', MF:'MF', IF:'IF' };\nconst GRAIN_STROKE = {\n PP:'#5b9dc9', DF:'#4caf50', RG:'#4caf50',\n FC:'#2563a8', DH:'#d35400', SH:'#c49a00',\n MF:'#7b5ea7', IF:'#3b8dbf'\n};\nconst H_LABELS = { 1:'F', 1.5:'F+', 2:'4F', 2.5:'4F+', 3:'1F', 3.5:'1F+', 4:'P', 4.5:'P+', 5:'K' };<\/p>\n<p>\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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\/\/ SVG RENDER\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction render() {\n renderLayerList();\n renderTestList();\n renderSVG();\n}<\/p>\n<p>function renderSVG() {\n const HS = parseFloat(document.getElementById('m-hs').value) || 100;\n \/\/ SVG dimensions\n const W = 720, H_SVG = 580;\n const AXIS_X = 400; \/\/ height axis x position\n const BAR_RIGHT = AXIS_X; \/\/ bars anchor right here\n const MAX_BAR = 290; \/\/ full width for K(5)\n const Y_TOP = 60;\n const Y_BOT = 460;\n const PX_PER_CM = (Y_BOT - Y_TOP) \/ HS;<\/p>\n<p> function yOf(cm) { return Y_BOT - cm * PX_PER_CM; }<\/p>\n<p> \/\/ Hardness grid x positions (from AXIS_X leftward)\n \/\/ H=1\u219218, H=2\u219236, H=3\u219273, H=4\u2192145, H=5\u2192290\n const hGrid = [1,2,3,4,5].map(h => ({ h, x: AXIS_X - hardnessWidth(h) }));<\/p>\n<p> let svg = `<svg id=\"profileSVG\" width=\"${W}\" viewBox=\"0 0 ${W} ${H_SVG}\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" font-family=\"'DM Mono','Courier New',monospace\">`;<\/p>\n<p> \/\/ defs\n svg += `<defs>`;\n Object.entries(GRAIN_COLORS).forEach(([k,c]) => {\n const sc = GRAIN_STROKE[k];\n \/\/ diagonal hatch\n svg += `<pattern id=\"pat${k}\" patternUnits=\"userSpaceOnUse\" width=\"5\" height=\"5\" patternTransform=\"rotate(45)\">\n <line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"5\" stroke=\"${sc}\" stroke-width=\"1\" opacity=\"0.35\"\/>\n <\/pattern>`;\n });\n svg += `<\/defs>`;<\/p>\n<p> \/\/ background\n svg += `<rect x=\"${AXIS_X-MAX_BAR}\" y=\"${Y_TOP}\" width=\"${MAX_BAR}\" height=\"${Y_BOT-Y_TOP}\" fill=\"#f8f7f4\"\/>`;<\/p>\n<p> \/\/ Vertical hardness grid lines\n hGrid.forEach(({h, x}) => {\n svg += `<line x1=\"${x}\" y1=\"${Y_TOP-12}\" x2=\"${x}\" y2=\"${Y_BOT+4}\" stroke=\"#b8d4e8\" stroke-width=\"0.6\" stroke-dasharray=\"3,3\"\/>`;\n });<\/p>\n<p> \/\/ Horizontal grid every 10cm\n for (let cm = 0; cm <= HS; cm += 10) {\n const y = yOf(cm);\n svg += `<line x1=\"${AXIS_X-MAX_BAR}\" y1=\"${y}\" x2=\"${AXIS_X}\" y2=\"${y}\" stroke=\"#ddd\" stroke-width=\"${cm % 50 === 0 ? 0.8 : 0.4}\"\/>`;\n }<\/p>\n<p> \/\/ \u2500\u2500 LAYERS \u2500\u2500\n layers.forEach(l => {\n const y1 = yOf(l.htop), y2 = yOf(l.hbot);\n const layH = y2 - y1;\n const bw = hardnessWidth(l.hardness);\n const bx = AXIS_X - bw;\n const fill = GRAIN_COLORS[l.grain] || '#cce';\n const stroke = GRAIN_STROKE[l.grain] || '#555';<\/p>\n<p> \/\/ filled rect\n svg += `<rect x=\"${bx}\" y=\"${y1}\" width=\"${bw}\" height=\"${layH}\" fill=\"${fill}\" stroke=\"${stroke}\" stroke-width=\"1.2\"\/>`;\n \/\/ texture overlay\n svg += `<rect x=\"${bx}\" y=\"${y1}\" width=\"${bw}\" height=\"${layH}\" fill=\"url(#pat${l.grain})\" opacity=\"0.5\"\/>`;<\/p>\n<p> \/\/ grain symbol centered in bar\n const sym = GRAIN_SYM[l.grain] || '?';\n const midY = (y1 + y2) \/ 2;\n if (layH > 10) {\n svg += `<text x=\"${bx + bw\/2}\" y=\"${midY + 5}\" font-size=\"${Math.min(16, layH*0.5)}\" fill=\"${stroke}\" text-anchor=\"middle\" opacity=\"0.7\">${sym}<\/text>`;\n }\n });<\/p>\n<p> \/\/ \u2500\u2500 HEIGHT AXIS \u2500\u2500\n svg += `<line x1=\"${AXIS_X}\" y1=\"${Y_TOP}\" x2=\"${AXIS_X}\" y2=\"${Y_BOT+4}\" stroke=\"#1a1915\" stroke-width=\"1.5\"\/>`;<\/p>\n<p> \/\/ Tick marks and labels\n for (let cm = 0; cm <= HS; cm += (HS <= 50 ? 5 : 10)) {\n const y = yOf(cm);\n const major = cm % (HS <= 50 ? 10 : 20) === 0;\n svg += `<line x1=\"${AXIS_X}\" y1=\"${y}\" x2=\"${AXIS_X + (major?10:6)}\" y2=\"${y}\" stroke=\"#1a1915\" stroke-width=\"${major?1.2:0.8}\"\/>`;\n if (major) {\n svg += `<text x=\"${AXIS_X+14}\" y=\"${y+4}\" font-size=\"10\" fill=\"#444\">${cm}<\/text>`;\n }\n }\n svg += `<text x=\"${AXIS_X+14}\" y=\"${Y_TOP-8}\" font-size=\"10\" fill=\"#2563a8\" font-weight=\"500\">H (cm)<\/text>`;<\/p>\n<p> \/\/ Layer boundary lines + labels on right\n const COL1 = AXIS_X + 55; \/\/ grain form\n const COL2 = AXIS_X + 90; \/\/ size\n const COL3 = AXIS_X + 120; \/\/ wet\n const COL4 = AXIS_X + 150; \/\/ hardness label\n const COL5 = AXIS_X + 195; \/\/ tests & notes<\/p>\n<p> \/\/ Column headers\n svg += `<text x=\"${COL1}\" y=\"${Y_TOP-12}\" font-size=\"8\" fill=\"#888\" text-anchor=\"middle\">Form<\/text>`;\n svg += `<text x=\"${COL2}\" y=\"${Y_TOP-12}\" font-size=\"8\" fill=\"#888\" text-anchor=\"middle\">Size<\/text>`;\n svg += `<text x=\"${COL3}\" y=\"${Y_TOP-12}\" font-size=\"8\" fill=\"#888\" text-anchor=\"middle\">Wet<\/text>`;\n svg += `<text x=\"${COL4}\" y=\"${Y_TOP-12}\" font-size=\"8\" fill=\"#888\" text-anchor=\"middle\">Hard.<\/text>`;\n svg += `<text x=\"${COL5}\" y=\"${Y_TOP-12}\" font-size=\"8\" fill=\"#888\">Tests & Notes<\/text>`;<\/p>\n<p> \/\/ Vertical column separators\n [COL1-18, COL2-15, COL3-15, COL4-18, COL5-22].forEach(cx => {\n svg += `<line x1=\"${cx}\" y1=\"${Y_TOP}\" x2=\"${cx}\" y2=\"${Y_BOT}\" stroke=\"#e0ddd5\" stroke-width=\"0.5\"\/>`;\n });<\/p>\n<p> layers.forEach(l => {\n const y1 = yOf(l.htop), y2 = yOf(l.hbot);\n const midY = (y1 + y2) \/ 2 + 4;<\/p>\n<p> \/\/ horizontal separator at bottom of each layer\n svg += `<line x1=\"${AXIS_X}\" y1=\"${y2}\" x2=\"${COL5+150}\" y2=\"${y2}\" stroke=\"#e0ddd5\" stroke-width=\"0.4\"\/>`;<\/p>\n<p> const sym = GRAIN_SYM[l.grain] || '';\n const stroke = GRAIN_STROKE[l.grain] || '#555';\n svg += `<text x=\"${COL1}\" y=\"${midY}\" font-size=\"13\" fill=\"${stroke}\" text-anchor=\"middle\">${sym}<\/text>`;\n svg += `<text x=\"${COL2}\" y=\"${midY}\" font-size=\"9\" fill=\"#555\" text-anchor=\"middle\">${l.size||'\u2014'}<\/text>`;\n svg += `<text x=\"${COL3}\" y=\"${midY}\" font-size=\"9\" fill=\"#555\" text-anchor=\"middle\">${l.wet}<\/text>`;\n const hl = H_LABELS[l.hardness] || String(l.hardness);\n const hcolor = l.hardness >= 4 ? '#c0392b' : '#1a1915';\n svg += `<text x=\"${COL4}\" y=\"${midY}\" font-size=\"9.5\" fill=\"${hcolor}\" text-anchor=\"middle\" font-weight=\"500\">${hl}<\/text>`;\n if (l.note) {\n svg += `<text x=\"${COL5}\" y=\"${midY}\" font-size=\"8.5\" fill=\"#888\">${l.note}<\/text>`;\n }\n });<\/p>\n<p> \/\/ \u2500\u2500 TESTS on profile \u2500\u2500\n tests.forEach(t => {\n if (t.height == null) return;\n const y = yOf(t.height);\n const label = t.type + (t.score != null ? t.score : '') + (t.fracture ? ' '+t.fracture : '');\n svg += `<line x1=\"${AXIS_X-MAX_BAR-5}\" y1=\"${y}\" x2=\"${COL5+150}\" y2=\"${y}\" stroke=\"#c0392b\" stroke-width=\"0.8\" stroke-dasharray=\"4,3\" opacity=\"0.7\"\/>`;\n svg += `<text x=\"${COL5}\" y=\"${y-2}\" font-size=\"8.5\" fill=\"#c0392b\" font-weight=\"500\">\u2190 ${label} @${t.height}cm<\/text>`;\n });<\/p>\n<p> \/\/ \u2500\u2500 HARDNESS SCALE BOTTOM \u2500\u2500\n const Y_SCALE = Y_BOT + 20;\n svg += `<line x1=\"${AXIS_X-MAX_BAR}\" y1=\"${Y_BOT}\" x2=\"${AXIS_X}\" y2=\"${Y_BOT}\" stroke=\"#1a1915\" stroke-width=\"1\"\/>`;\n hGrid.forEach(({h, x}) => {\n svg += `<line x1=\"${x}\" y1=\"${Y_BOT}\" x2=\"${x}\" y2=\"${Y_BOT+7}\" stroke=\"#2563a8\" stroke-width=\"1\"\/>`;\n const labels = {1:'F',2:'4F',3:'1F',4:'P',5:'K'};\n svg += `<text x=\"${x}\" y=\"${Y_SCALE+5}\" font-size=\"9\" fill=\"#2563a8\" text-anchor=\"middle\">${labels[h]}<\/text>`;\n });\n svg += `<text x=\"${AXIS_X}\" y=\"${Y_SCALE+5}\" font-size=\"9\" fill=\"#2563a8\" text-anchor=\"middle\">\u2192<\/text>`;\n svg += `<text x=\"${(AXIS_X-MAX_BAR+AXIS_X)\/2}\" y=\"${Y_SCALE+18}\" font-size=\"8\" fill=\"#888\" text-anchor=\"middle\">\u2190 harder \u00b7 softer \u2192<\/text>`;<\/p>\n<p> \/\/ \u2500\u2500 META TOP LEFT \u2500\u2500\n const lieu = document.getElementById('m-lieu').value;\n const date = document.getElementById('m-date').value;\n const alt = document.getElementById('m-alt').value;\n const aspect = document.getElementById('m-aspect').value;\n const slope = document.getElementById('m-slope').value;\n const ts = document.getElementById('m-ts').value;\n const ta = document.getElementById('m-ta').value;\n const obs = document.getElementById('m-obs').value;<\/p>\n<p> const MX = 10, MY = 16;\n svg += `<text x=\"${MX}\" y=\"${MY}\" font-size=\"9\" fill=\"#888\" font-weight=\"500\">LIEU:<\/text>`;\n svg += `<text x=\"${MX}\" y=\"${MY+14}\" font-size=\"14\" fill=\"#2563a8\" font-weight=\"500\">${lieu}<\/text>`;\n svg += `<text x=\"${MX}\" y=\"${MY+30}\" font-size=\"9\" fill=\"#888\">Date: <tspan fill=\"#1a1915\">${date}<\/tspan><\/text>`;\n svg += `<text x=\"${MX}\" y=\"${MY+44}\" font-size=\"9\" fill=\"#888\">Alt: <tspan fill=\"#1a1915\">${alt} m<\/tspan> ${aspect} ${slope}\u00b0<\/text>`;\n svg += `<text x=\"${MX}\" y=\"${MY+58}\" font-size=\"9\" fill=\"#888\">Surf: <tspan fill=\"#1a1915\">${ts}\u00b0C<\/tspan> Air: <tspan fill=\"#1a1915\">${ta}\u00b0C<\/tspan><\/text>`;\n if (obs) svg += `<text x=\"${MX}\" y=\"${MY+72}\" font-size=\"8.5\" fill=\"#888\">${obs}<\/text>`;<\/p>\n<p> \/\/ Warning if DH present\n const hasDH = layers.some(l => l.grain === 'DH');\n if (hasDH) {\n svg += `<rect x=\"${MX}\" y=\"${MY+82}\" width=\"100\" height=\"16\" rx=\"3\" fill=\"#fde8e6\"\/>`;\n svg += `<text x=\"${MX+6}\" y=\"${MY+94}\" font-size=\"8.5\" fill=\"#c0392b\" font-weight=\"600\">\u26a0 DH \u2014 Couche fragile<\/text>`;\n }<\/p>\n<p> svg += `<\/svg>`;\n document.getElementById('svgWrap').innerHTML = svg;\n}<\/p>\n<p>\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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\/\/ LAYER LIST\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction renderLayerList() {\n const el = document.getElementById('layerList');\n el.innerHTML = [...layers].reverse().map((l, ri) => {\n const i = layers.length - 1 - ri;\n const sel = selectedLayer === i ? ' selected' : '';\n const isDH = l.grain === 'DH' ? ' dh' : '';\n const bw = Math.round(hardnessWidth(l.hardness));\n const hl = H_LABELS[l.hardness] || l.hardness;\n const c = GRAIN_COLORS[l.grain] || '#ccc';\n const sc = GRAIN_STROKE[l.grain] || '#666';\n const sym = GRAIN_SYM[l.grain] || '?';\n return `<\/p>\n<div class=\"layer-card${sel}${isDH}\" onclick=\"selectLayer(${i})\">\n<div class=\"layer-swatch\" style=\"height:${Math.max(18,Math.min(40,l.htop-l.hbot)*0.8)}px;background:${c};border-color:${sc}\"><\/div>\n<div class=\"layer-info\">\n<div class=\"range\">${l.hbot}\u2013${l.htop} cm<\/div>\n<div class=\"desc\">${sym} ${l.grain} \u00b7 ${hl} \u00b7 ${bw}px wide${l.note ? ' \u00b7 '+l.note : ''}<\/div>\n<\/p><\/div>\n<p> <button class=\"layer-del\" onclick=\"event.stopPropagation();deleteLayer(${i})\">\u00d7<\/button>\n <\/div>\n<p>`;\n }).join('');\n}<\/p>\n<p>function selectLayer(i) {\n selectedLayer = i;\n const l = layers[i];\n document.getElementById('layerFormWrap').style.display = 'block';\n document.getElementById('lf-hbot').value = l.hbot;\n document.getElementById('lf-htop').value = l.htop;\n document.getElementById('lf-size').value = l.size;\n document.getElementById('lf-wet').value = l.wet;\n document.getElementById('lf-note').value = l.note;\n \/\/ hardness btns\n document.querySelectorAll('.h-btn').forEach(b => {\n b.classList.toggle('active', parseFloat(b.dataset.h) === Math.round(l.hardness));\n });\n \/\/ grain btns\n document.querySelectorAll('.g-btn').forEach(b => {\n b.classList.toggle('active', b.dataset.g === l.grain);\n });\n render();\n}<\/p>\n<p>function setH(h) {\n if (selectedLayer == null) return;\n layers[selectedLayer].hardness = h;\n document.querySelectorAll('.h-btn').forEach(b => b.classList.toggle('active', parseFloat(b.dataset.h) === h));\n render();\n}\nfunction setG(g) {\n if (selectedLayer == null) return;\n layers[selectedLayer].grain = g;\n document.querySelectorAll('.g-btn').forEach(b => b.classList.toggle('active', b.dataset.g === g));\n render();\n}\nfunction updateLayer() {\n if (selectedLayer == null) return;\n const l = layers[selectedLayer];\n l.hbot = parseFloat(document.getElementById('lf-hbot').value) || 0;\n l.htop = parseFloat(document.getElementById('lf-htop').value) || 0;\n l.size = document.getElementById('lf-size').value;\n l.wet = document.getElementById('lf-wet').value;\n l.note = document.getElementById('lf-note').value;\n render();\n}\nfunction addLayer() {\n const maxTop = Math.max(...layers.map(l => l.htop), 0);\n layers.push({ hbot: maxTop, htop: maxTop+10, hardness:1, grain:'PP', size:'', wet:'D', note:'' });\n selectedLayer = layers.length - 1;\n switchTab('layers');\n render();\n selectLayer(selectedLayer);\n}\nfunction deleteLayer(i) {\n layers.splice(i, 1);\n if (selectedLayer >= layers.length) selectedLayer = null;\n if (layers.length === 0) document.getElementById('layerFormWrap').style.display = 'none';\n render();\n}<\/p>\n<p>\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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\/\/ TEST LIST\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction renderTestList() {\n const el = document.getElementById('testList');\n el.innerHTML = tests.map((t, i) => {\n return `<\/p>\n<div class=\"test-item\">\n <span class=\"test-type\">${t.type}<\/span>\n <input style=\"width:44px;padding:5px 6px;border:1px solid var(--border);border-radius:5px;font-family:var(--mono);font-size:12px\"\n value=\"${t.score ?? ''}\" placeholder=\"score\" oninput=\"tests[${i}].score=this.value?+this.value:null;render()\"\/>\n <select style=\"flex:1;padding:5px 6px;border:1px solid var(--border);border-radius:5px;font-size:12px\"\n onchange=\"tests[${i}].fracture=this.value;render()\">\n ${['SP','SC','P','B','N','RP','BRK'].map(f=>`<option${t.fracture===f?' selected':''}>${f}<\/option>`).join('')}\n <\/select>\n <input style=\"width:44px;padding:5px 6px;border:1px solid var(--border);border-radius:5px;font-family:var(--mono);font-size:12px\"\n value=\"${t.height ?? ''}\" placeholder=\"cm\" oninput=\"tests[${i}].height=this.value?+this.value:null;render()\"\/>\n <button class=\"layer-del\" onclick=\"tests.splice(${i},1);render()\">\u00d7<\/button>\n <\/div>\n<p>`;\n }).join('');\n}\nfunction addTest(type) {\n tests.push({ type, score: null, fracture: 'SP', height: null });\n render();\n}<\/p>\n<p>\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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\/\/ TABS\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction switchTab(name) {\n const tabs = ['meta','layers','tests'];\n tabs.forEach(t => {\n document.getElementById('tab-'+t).classList.toggle('active', t===name);\n });\n document.querySelectorAll('.tab-btn').forEach((b,i) => {\n b.classList.toggle('active', tabs[i]===name);\n });\n}<\/p>\n<p>\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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\/\/ EXPORT\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction exportSVG() {\n const svg = document.getElementById('profileSVG');\n if (!svg) return;\n const blob = new Blob([svg.outerHTML], {type:'image\/svg+xml'});\n const a = document.createElement('a');\n a.href = URL.createObjectURL(blob);\n a.download = 'snow_profile.svg';\n a.click();\n}<\/p>\n<p>function exportPNG() {\n const svg = document.getElementById('profileSVG');\n if (!svg) return;\n const xml = new XMLSerializer().serializeToString(svg);\n const img = new Image();\n const vb = svg.getAttribute('viewBox').split(' ');\n const W = parseFloat(vb[2]), H = parseFloat(vb[3]);\n img.onload = () => {\n const canvas = document.createElement('canvas');\n canvas.width = W * 2; canvas.height = H * 2;\n const ctx = canvas.getContext('2d');\n ctx.scale(2,2);\n ctx.fillStyle = 'white';\n ctx.fillRect(0,0,W,H);\n ctx.drawImage(img, 0, 0, W, H);\n const a = document.createElement('a');\n a.href = canvas.toDataURL('image\/png');\n a.download = 'snow_profile.png';\n a.click();\n };\n img.src = 'data:image\/svg+xml;base64,' + btoa(unescape(encodeURIComponent(xml)));\n}<\/p>\n<p>function importPhoto() {\n document.getElementById('photoInput').click();\n}\nasync function handlePhoto(input) {\n const file = input.files[0];\n if (!file) return;\n const b64 = await new Promise((res,rej)=>{\n const r = new FileReader();\n r.onload = () => res(r.result.split(',')[1]);\n r.onerror = rej;\n r.readAsDataURL(file);\n });\n alert('Analyse IA en cours... (n\u00e9cessite connexion API Anthropic)');\n \/\/ API call would go here \u2014 same as in the web app version\n}<\/p>\n<p>\/\/ \u2500\u2500 INIT \u2500\u2500\nrender();\n<\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Snow Profile \u2014 Profil Stratigraphique \u2744 SNOW PROFILE Profil Stratigraphique de Neige \ud83d\udcf7 Importer photo \u2b07 SVG \u2b07 PNG Infos […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-210","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>-<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sierra-risk.com\/?page_id=210\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"-\" \/>\n<meta property=\"og:description\" content=\"Snow Profile \u2014 Profil Stratigraphique \u2744 SNOW PROFILE Profil Stratigraphique de Neige \ud83d\udcf7 Importer photo \u2b07 SVG \u2b07 PNG Infos […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sierra-risk.com\/?page_id=210\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-07T07:52:03+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/sierra-risk.com\\\/?page_id=210\",\"url\":\"https:\\\/\\\/sierra-risk.com\\\/?page_id=210\",\"name\":\"-\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/sierra-risk.com\\\/#website\"},\"datePublished\":\"2026-05-07T07:52:02+00:00\",\"dateModified\":\"2026-05-07T07:52:03+00:00\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/sierra-risk.com\\\/?page_id=210\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/sierra-risk.com\\\/#website\",\"url\":\"https:\\\/\\\/sierra-risk.com\\\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/sierra-risk.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"}]}<\/script>\n","yoast_head_json":{"title":"-","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sierra-risk.com\/?page_id=210","og_locale":"fr_FR","og_type":"article","og_title":"-","og_description":"Snow Profile \u2014 Profil Stratigraphique \u2744 SNOW PROFILE Profil Stratigraphique de Neige \ud83d\udcf7 Importer photo \u2b07 SVG \u2b07 PNG Infos […]","og_url":"https:\/\/sierra-risk.com\/?page_id=210","article_modified_time":"2026-05-07T07:52:03+00:00","twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/sierra-risk.com\/?page_id=210","url":"https:\/\/sierra-risk.com\/?page_id=210","name":"-","isPartOf":{"@id":"https:\/\/sierra-risk.com\/#website"},"datePublished":"2026-05-07T07:52:02+00:00","dateModified":"2026-05-07T07:52:03+00:00","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sierra-risk.com\/?page_id=210"]}]},{"@type":"WebSite","@id":"https:\/\/sierra-risk.com\/#website","url":"https:\/\/sierra-risk.com\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sierra-risk.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"}]}},"_links":{"self":[{"href":"https:\/\/sierra-risk.com\/index.php?rest_route=\/wp\/v2\/pages\/210","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sierra-risk.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sierra-risk.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sierra-risk.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sierra-risk.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=210"}],"version-history":[{"count":1,"href":"https:\/\/sierra-risk.com\/index.php?rest_route=\/wp\/v2\/pages\/210\/revisions"}],"predecessor-version":[{"id":211,"href":"https:\/\/sierra-risk.com\/index.php?rest_route=\/wp\/v2\/pages\/210\/revisions\/211"}],"wp:attachment":[{"href":"https:\/\/sierra-risk.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}