.custom-kit { background: #f5f8f5; padding: 70px 0 80px; }
.custom-kit-panel { overflow: hidden; border-radius: 30px; background: #173e34; color: #fff; padding-bottom: 32px; }
.custom-kit-panel .custom-intro { border-radius: 0; }
.custom-kit-panel .custom-process-heading { margin: 34px 32px 24px; padding-top: 30px; border-top: 1px solid #ffffff26; }
.custom-kit-panel .custom-process-heading h3, .custom-kit-panel .custom-process-heading h3 em { color: #fff; }
.custom-kit-panel .custom-process-heading p { color: #c4d5cc; }
.custom-kit-panel .custom-steps { margin: 0 32px; }
.custom-kit-panel .custom-steps > li { background: #22483d; border-color: #ffffff20; }
.custom-kit-panel .custom-steps h4 { color: #fff; }
.custom-kit-panel .custom-steps p { color: #d4e0d8; }
.custom-kit-panel .custom-step-number, .custom-kit-panel .custom-step-link { color: #e4cca6; }
.custom-kit-panel .custom-step-detail { color: #b8d0c1; }
.custom-intro { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: 30px; background: #173e34; color: white; }
.custom-copy { padding: 42px; align-self: center; }
.custom-copy .kicker { color: #ddc7a6; background: transparent; padding: 0; }
.custom-copy h2 { font-size: clamp(36px,4vw,56px); line-height: 1.08; margin: 18px 0 22px; color: white; }
.custom-copy h2 em { color: #ddc7a6; }
.custom-copy > p:not(.kicker) { max-width: 440px; margin-bottom: 26px; font-size: 14px; line-height: 1.8; color: #e2eae5; }
.custom-intro-note { display: block; max-width: 330px; margin-top: 15px; color: #bdd0c5; font-size: 11px; line-height: 1.7; }
.custom-hero-visual { position: relative; min-height: 390px; margin: 0; background: #d8e4d9; }
.custom-hero-visual > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: contain; }
.custom-hero-visual figcaption { position: absolute; bottom: 20px; left: 20px; right: 20px; width: fit-content; padding: 12px 16px; border-radius: 12px; background: #f7faf3ed; color: var(--vert); font-size: 11px; }
.custom-hero-visual figcaption span { margin-right: 8px; color: var(--bleu); }
.custom-process-heading { display: flex; justify-content: space-between; align-items: center; gap: 25px; margin: 42px 0 24px; scroll-margin-top: 110px; }
.custom-process-heading h3 { max-width: 450px; font-size: 27px; line-height: 1.2; font-weight: 600; }
.custom-process-heading p { max-width: 295px; font-size: 12px; line-height: 1.7; color: var(--texte2); }
.custom-steps { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 16px; padding: 0; margin: 0; list-style: none; }
.custom-steps > li { min-width: 0; display: flex; flex-direction: column; padding: 10px 10px 20px; border-radius: 18px; background: #fff; border: 1px solid #e0e9e1; }
.custom-step-visual { height: 132px; position: relative; background: #edf3ef; border-radius: 10px; overflow: hidden; margin-bottom: 18px; }
.custom-step-visual img, .custom-step-visual svg { display: block; height: 100%; width: 100%; object-fit: contain; }
.custom-step-visual img:not(.custom-model-image):not(.custom-range-image) { padding: 8px; }
.custom-step-visual .custom-model-image { object-fit: cover; }
.custom-step-visual .custom-range-image { mix-blend-mode: multiply; }
.custom-check { position: absolute; right: 9px; bottom: 9px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--vert); color: white; font-size: 16px; }
.custom-step-number { margin: 0 5px 9px; color: var(--bleu); text-transform: uppercase; font-size: 10px; letter-spacing: .12em; font-weight: 600; }
.custom-steps h4 { margin: 0 5px 12px; font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -.035em; min-height: 2.5em; }
.custom-steps p { margin: 0 5px 18px; font-size: 12px; line-height: 1.7; color: var(--texte2); }
.custom-step-link, .custom-step-detail { margin: auto 5px 0; padding: 0; border: 0; background: none; color: var(--bleu); font: 500 10px/1.6 var(--sans); text-align: left; }
.custom-step-link { cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.custom-step-detail { color: #6c8276; }
.custom-dialog { width: min(740px,94vw); max-height: 90vh; border: 0; border-radius: 24px; padding: 32px; color: var(--vert); background: #fff; }
.custom-dialog::backdrop { background: #102d27b8; }
.custom-close { float: right; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; background: #edf3ef; border: 0; color: var(--vert); font-size: 26px; cursor: pointer; }
.custom-dialog h2 { margin: 12px 0 16px; font-size: 34px; line-height: 1.15; }
#custom-local-note { font-size: 12px; line-height: 1.7; color: var(--texte2); margin: 0 0 24px; }
#custom-project-form { display: block; margin: 0; }
#custom-project-form fieldset { min-width: 0; border: 0; padding: 0; margin: 0 0 28px; }
#custom-project-form legend { margin-bottom: 14px; font-size: 15px; font-weight: 600; }
#custom-project-form label { display: block; text-transform: none; letter-spacing: 0; font-size: 12px; line-height: 1.5; }
#custom-project-form .custom-upload { position: relative; text-align: center; padding: 18px; border: 1px dashed #79958a; border-radius: 14px; background: #f3f7f4; cursor: pointer; }
.custom-upload > span { display: block; font-size: 24px; }
.custom-upload strong, .custom-upload small { display: block; }
.custom-upload small { margin: 7px 0 14px; font-size: 10px; color: var(--texte2); }
#custom-project-files { width: 100%; padding: 4px; border: 0; border-radius: 0; background: transparent; font-size: 12px; }
#custom-project-files::file-selector-button { margin-right: 10px; border: 0; border-radius: 20px; padding: 9px 14px; background: var(--vert); color: #fff; font: 500 11px var(--sans); cursor: pointer; }
.custom-file-status { font-size: 11px; overflow-wrap: anywhere; margin: 8px 0 20px; color: var(--texte2); }
#custom-project-description { display: block; width: 100%; resize: vertical; min-height: 105px; margin-top: 8px; padding: 14px; border: 1px solid #bbcfc2; border-radius: 12px; font: 400 14px/1.6 var(--sans); color: var(--vert); }
.custom-format-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
#custom-project-form .custom-format-grid label { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid #d7e3da; border-radius: 12px; cursor: pointer; }
.custom-format-grid label:has(input:checked) { background: #e3eee5; border-color: #173e34 !important; }
#custom-project-form .custom-format-grid input { appearance: auto; width: 16px; height: 16px; flex: 0 0 16px; margin: 3px 0 0; padding: 0; accent-color: #173e34; }
.custom-format-grid strong, .custom-format-grid small { display: block; }
.custom-format-grid small { margin-top: 4px; color: var(--texte2); font-size: 11px; line-height: 1.5; }
.custom-project-summary { margin-top: 20px; padding: 18px; border-radius: 12px; background: #edf3ef; font-size: 13px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.custom-project-summary[hidden] { display: none; }
body.custom-project-open { overflow: hidden; }
@media (max-width: 640px) { .custom-kit-panel { border-radius: 22px; padding-bottom: 20px; } .custom-kit-panel .custom-process-heading { margin: 24px 20px 20px; padding-top: 24px; } .custom-kit-panel .custom-steps { margin: 0 20px; } }
@media (max-width: 1000px) { .custom-copy { padding: 28px; } .custom-steps { grid-template-columns: repeat(3,minmax(0,1fr)); } .custom-step-visual { height: 155px; } }
@media (max-width: 640px) { .custom-kit { padding: 42px 0; } .custom-intro { grid-template-columns: 1fr; border-radius: 22px; } .custom-hero-visual { min-height: 270px; } .custom-process-heading { display: block; margin-top: 30px; } .custom-process-heading p { margin-top: 12px; } .custom-steps { grid-template-columns: 1fr; gap: 16px; } .custom-steps > li { padding: 14px 14px 22px; } .custom-step-visual { height: 180px; } .custom-steps h4 { min-height: 0; font-size: 21px; } .custom-steps p { font-size: 13px; } .custom-step-link, .custom-step-detail { font-size: 12px; } .custom-dialog { padding: 22px; } .custom-dialog h2 { font-size: 29px; } #custom-project-description { font-size: 16px; } .custom-format-grid { grid-template-columns: 1fr; } }