[data-tool="code-grille"] *,[data-tool="code-grille"] *::before,[data-tool="code-grille"] *::after{box-sizing: border-box}[data-tool="code-grille"] button,[data-tool="code-grille"] input,[data-tool="code-grille"] textarea{font: inherit}[data-tool="code-grille"] button:not(:disabled){cursor: pointer}.grid-code-tool{display: grid;gap: 22px}.grid-code-intro{margin: 0;color: #123f73;line-height: 1.65}.grid-code-layout{display: grid;grid-template-columns: minmax(320px,1.04fr) minmax(320px,.96fr);gap: 18px;align-items: start}.grid-code-card{min-width: 0;border: 1px solid #e3cf78;border-radius: 8px;background: #fff;padding: 16px}.grid-code-card h2{margin: 0;color: #123f73;font-size: 20px;font-weight: 900;line-height: 1.2}.grid-code-card-head,.grid-code-result-head{display: flex;align-items: center;justify-content: space-between;gap: 16px;margin-bottom: 18px}.grid-code-actions,.grid-code-result-actions{display: flex;flex-wrap: wrap;gap: 10px;align-items: center;justify-content: flex-end}.grid-code-action{display: inline-flex;align-items: center;justify-content: center;gap: 7px;min-height: 44px;border: 1px solid #e3cf78;border-radius: 8px;background: #fff;color: #123f73;font-size: 16px;font-weight: 800;padding: 10px 16px;transition: background-color .18s ease,border-color .18s ease,color .18s ease,transform .12s ease}.grid-code-action:hover:not(:disabled),.grid-code-action:focus-visible:not(:disabled){border-color: #8a4f05;background: #fff7d7}.grid-code-action:active:not(:disabled),.grid-code-selector button:not(:disabled):active,.grid-code-stepper button:not(:disabled):active{transform: translateY(1px)}.grid-code-action:disabled{cursor: not-allowed;border-color: #eadca9;background: #fffaf0;color: #a98d64}.grid-code-action-icon{flex: 0 0 auto;width: 16px;height: 16px;fill: currentColor}.grid-code-field{display: block;min-width: 0}.grid-code-field>span,.grid-code-setting>p{display: block;margin: 0 0 8px;color: #123f73;font-size: 18px;font-weight: 800;line-height: 1.2;text-align: center}.grid-code-field textarea,.grid-code-field input,.grid-code-result-card textarea{display: block;width: 100%;border: 1px solid #e3cf78;border-radius: 8px;background: #fff;color: #123f73;font-size: 16px;line-height: 1.55;padding: 14px 16px}.grid-code-field textarea{min-height: 260px;resize: vertical}.grid-code-source-foot{display: flex;align-items: center;justify-content: space-between;gap: 12px;margin-top: 12px}.grid-code-result-card textarea{min-height: 120px;font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;resize: vertical}.grid-code-field textarea:focus,.grid-code-field input:focus,.grid-code-result-card textarea:focus,.grid-code-stepper input:focus{border-color: #8a4f05;box-shadow: 0 0 0 3px rgba(227,207,120,.32);outline: 0}.grid-code-settings{display: flex;flex-direction: column;gap: 18px}.grid-code-settings>h2{text-align: center}.grid-code-selector{display: flex;align-items: stretch;width: 100%;min-width: 0;border: 1px solid #e3cf78;border-radius: 8px;background: #fff;padding: 5px;gap: 4px}.grid-code-selector-grid{display: grid;grid-template-columns: repeat(2,minmax(0,1fr))}.grid-code-selector button{flex: 1 1 0;min-width: 0;border: 0;border-radius: 7px;background: transparent;color: #123f73;font-size: 16px;font-weight: 800;line-height: 1.15;padding: 11px 9px;text-align: center;transition: background-color .18s ease,color .18s ease,transform .12s ease}.grid-code-selector button.is-active{background: #8a4f05;color: #fff}.grid-code-selector button:not(.is-active):hover,.grid-code-selector button:not(.is-active):focus-visible{background: #fff7d7}.grid-code-dimensions{display: grid;grid-template-columns: 1fr;gap: 18px}.grid-code-stepper{display: grid;grid-template-columns: 44px 58px 44px;gap: 8px;justify-content: center;align-items: center;width: 154px;margin: 0 auto}.grid-code-stepper button,.grid-code-stepper input{display: block;min-width: 0;min-height: 0;border: 1px solid #e3cf78;border-radius: 8px;background: #fff;color: #123f73;font-weight: 800;text-align: center}.grid-code-stepper button{width: 44px;height: 44px;padding: 0;color: #8a4f05;font-size: 20px;line-height: 1;transition: background-color .18s ease,border-color .18s ease,transform .12s ease}.grid-code-stepper button:not(:disabled):hover,.grid-code-stepper button:not(:disabled):focus-visible{border-color: #8a4f05;background: #fff7d7}.grid-code-stepper input{width: 58px;height: 44px;padding: 0 6px;font-size: 18px;line-height: 1;appearance: textfield}.grid-code-stepper input::-webkit-outer-spin-button,.grid-code-stepper input::-webkit-inner-spin-button{margin: 0;appearance: none}.grid-code-switch-grid{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 10px}.grid-code-switch-row{position: relative;min-height: 58px;display: flex;align-items: center;justify-content: space-between;gap: 14px;border: 1px solid #e3cf78;border-radius: 8px;background: #fff;color: #123f73;font-weight: 800;line-height: 1.3;padding: 10px 12px;transition: background-color .18s ease,border-color .18s ease,color .18s ease}.grid-code-switch-row:has(input:not(:checked)){background: #fffaf0;color: #496882}.grid-code-switch-row:has(input:focus-visible){outline: 3px solid color-mix(in srgb,var(--outil-focus) 30%,transparent);outline-offset: 2px}.grid-code-switch-row input{position: absolute;opacity: 0;pointer-events: none}.grid-code-switch-text{display: grid;gap: 2px;min-width: 0}.grid-code-switch-text>span,.grid-code-switch-text>small{overflow-wrap: anywhere}.grid-code-switch-text>small{color: #8a4f05;font-size: 12px;font-weight: 900;text-transform: uppercase}.grid-code-switch-row:has(input:not(:checked)) .grid-code-switch-text>small{color: #6f7f91}.grid-code-switch-ui{position: relative;flex: 0 0 auto;width: 54px;height: 28px;border: 2px solid #8a4f05;border-radius: 999px;background: #8a4f05}.grid-code-switch-ui::after{content: "";position: absolute;top: 50%;left: calc(100% - 21px);width: 17px;height: 17px;border-radius: 50%;background: #fff;transform: translateY(-50%);transition: left .16s ease}.grid-code-switch-row input:not(:checked) + .grid-code-switch-ui{border-color: #d8c16b;background: #f4ead2}.grid-code-switch-row input:not(:checked) + .grid-code-switch-ui::after{left: 4px}.grid-code-status{margin: 0;color: #496882;line-height: 1.5}.grid-code-result-head{align-items: baseline}.grid-code-stats{display: flex;flex-wrap: wrap;justify-content: flex-end;gap: 10px 16px;color: #496882;font-weight: 800}.grid-code-stats strong{color: #8a4f05}.grid-code-result-actions{justify-content: flex-end;margin-top: 12px}.grid-code-grid-wrap{display: flex;justify-content: center;overflow: auto;margin-top: 16px;border: 1px solid #d8c16b;border-radius: 8px;background: #fffaf0;padding: 18px 12px}.grid-code-grid{display: grid;gap: 0;width: max-content;border-top: 1px solid #1f2d3d;border-left: 1px solid #1f2d3d}.grid-code-grid.is-cols-2{grid-template-columns: repeat(2,clamp(30px,5vw,46px))}.grid-code-grid.is-cols-3{grid-template-columns: repeat(3,clamp(30px,5vw,46px))}.grid-code-grid.is-cols-4{grid-template-columns: repeat(4,clamp(30px,5vw,46px))}.grid-code-grid.is-cols-5{grid-template-columns: repeat(5,clamp(30px,5vw,46px))}.grid-code-grid.is-cols-6{grid-template-columns: repeat(6,clamp(30px,5vw,46px))}.grid-code-grid.is-cols-7{grid-template-columns: repeat(7,clamp(30px,5vw,46px))}.grid-code-grid.is-cols-8{grid-template-columns: repeat(8,clamp(30px,5vw,46px))}.grid-code-grid.is-cols-9{grid-template-columns: repeat(9,clamp(30px,5vw,46px))}.grid-code-grid.is-cols-10{grid-template-columns: repeat(10,clamp(30px,5vw,46px))}.grid-code-grid.is-cols-11{grid-template-columns: repeat(11,clamp(30px,5vw,46px))}.grid-code-grid.is-cols-12{grid-template-columns: repeat(12,clamp(30px,5vw,46px))}.grid-code-grid.is-cols-13{grid-template-columns: repeat(13,clamp(30px,5vw,46px))}.grid-code-grid.is-cols-14{grid-template-columns: repeat(14,clamp(30px,5vw,46px))}.grid-code-grid.is-cols-15{grid-template-columns: repeat(15,clamp(30px,5vw,46px))}.grid-code-grid.is-cols-16{grid-template-columns: repeat(16,clamp(30px,5vw,46px))}.grid-code-grid.is-cols-17{grid-template-columns: repeat(17,clamp(30px,5vw,46px))}.grid-code-grid.is-cols-18{grid-template-columns: repeat(18,clamp(30px,5vw,46px))}.grid-code-grid.is-cols-19{grid-template-columns: repeat(19,clamp(30px,5vw,46px))}.grid-code-grid.is-cols-20{grid-template-columns: repeat(20,clamp(30px,5vw,46px))}.grid-code-cell{display: grid;place-items: center;width: clamp(30px,5vw,46px);aspect-ratio: 1;border-right: 1px solid #1f2d3d;border-bottom: 1px solid #1f2d3d;background: #fff;color: #123f73;font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-weight: 800;line-height: 1;white-space: pre}.grid-code-cell--empty{background: #f7f9fc;color: #7f8da3}.grid-code-copy-helper{position: fixed;top: 0;left: -9999px}.grid-code-info-note{margin: 22px 0 0;padding: 22px;border: 1px solid #e3cf78;border-radius: 8px;background: #fffdf4;color: #1f2d3d}.grid-code-info-note h2{margin: 0 0 12px;color: var(--primary-dark,#123f73);font-size: 1.35rem;font-weight: 900;line-height: 1.2}.grid-code-info-note p{margin: 0;line-height: 1.65}.grid-code-info-note p + p{margin-top: 12px}.grid-code-info-grid{display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 16px;margin-top: 16px}.grid-code-info-card{min-width: 0;padding: 18px;border: 1px solid #e3cf78;border-radius: 8px;background: #fff;color: #1f2d3d}.grid-code-info-card h3{margin: 0 0 10px;color: #8a4f05;font-size: 1.05rem;font-weight: 900;line-height: 1.25}.grid-code-info-card p{margin: 0;line-height: 1.6}.grid-code-info-link{color: var(--primary-dark,#123f73);font-weight: 800;text-decoration: underline;text-underline-offset: 0.18em}.grid-code-info-link:hover,.grid-code-info-link:focus-visible{color: var(--accent-dark,#c45a00)}@media (max-width: 860px){.grid-code-layout,.grid-code-switch-grid,.grid-code-info-grid{grid-template-columns: 1fr}.grid-code-card-head,.grid-code-source-foot,.grid-code-result-head{align-items: flex-start;flex-direction: column}.grid-code-stats{justify-content: flex-start}}@media (max-width: 560px){.grid-code-card{padding: 16px}.grid-code-card-head,.grid-code-actions,.grid-code-source-foot,.grid-code-action{width: 100%}.grid-code-selector,.grid-code-selector-grid{display: flex;flex-direction: column}.grid-code-cell{width: 28px}}