/* ============================================================
   css/ressources-depot.css
   Page-specific styles for ressources-depot.html
   (Form to submit a new "retour d'expérience" project)

   Design language: "Grand Est" style — large label-on-top fields,
   bordered checkboxes, angular/flat buttons, orange accent on errors.

   Sections:
     1.  WRAPPER
     2.  REQUIRED-FIELD NOTICE
     3.  SECTION TITLES
     4.  FORM FIELDS (ge-field / ge-box / ge-label / ge-input)
     5.  FIELD HINT & INLINE ERROR
     6.  GRID LAYOUTS (2-col, 3-col)
     7.  THEMATIC CHECKBOXES
     8.  GPS BUTTON
     9.  FUNDER MULTI-SELECT
    10.  UPLOAD ZONES (image + PDF)
    11.  RGPD CONSENT BLOCK
    12.  CHARACTER COUNTER
    13.  LOADER
    14.  SUCCESS MESSAGE
    15.  ERROR BANNER
    16.  ACTION BUTTONS (submit + back)
    17.  RESPONSIVE OVERRIDES
============================================================ */

/* ── 1. WRAPPER ── */
/* Max-width content container centred on the page */
.depot-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px 80px;
}
@media (max-width: 640px) { .depot-wrap { padding: 0 16px 60px; } }

/* ── 2. REQUIRED-FIELD NOTICE ── */
.form-required-notice {
  font-size: 13px;
  color: #4a5a78;
  margin-bottom: 36px;
  line-height: 1.6;
}
/* Red asterisk styling */
.form-required-notice strong { color: #d9460f; }

/* ── 3. SECTION TITLES ── */
/* Large Cabinet Grotesk headings that separate form sections */
.ge-section-title {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #2a347d;
  margin: 44px 0 24px;
  line-height: 1.15;
}
/* Smaller variant for sub-sections */
.ge-section-title--sm {
  font-size: 20px;
  margin: 36px 0 16px;
}

/* ── 4. FORM FIELDS ── */
/*
   Structure:
     <div class="ge-field">
       <div class="ge-box [is-invalid]">
         <label class="ge-label">LABEL <span class="req">*</span></label>
         <input class="ge-input" …>
       </div>
     </div>

   Label is uppercase micro-text at the top of the bordered box.
*/

/* Outer wrapper for margin control */
.ge-field {
  position: relative;
  margin-bottom: 20px;
}

/* Bordered container — highlights on focus or validation error */
.ge-box {
  border: 1px solid #b8bfcc;
  background: #fff;
  padding: 10px 14px 12px;
  transition: border-color .18s;
  position: relative;
}
.ge-box:focus-within { border-color: #2a347d; }
.ge-box.is-invalid   { border-color: #d9460f; }

/* Uppercase label — sits above the input inside the box */
.ge-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: #4a5a78;
  margin-bottom: 6px;
  line-height: 1;
  white-space: nowrap;
}
/* Red asterisk for required fields */
.ge-label .req {
  color: #d9460f;
  margin-left: 3px;
  font-size: 12px;
  vertical-align: middle;
}

/* Transparent borderless input inside the box */
.ge-input {
  display: block;
  width: 100%;
  border: none;
  outline: none;
  padding: 0;
  font-size: 16px;
  font-family: 'Satoshi', system-ui, sans-serif;
  color: #1a2233;
  background: transparent;
  line-height: 1.4;
}
.ge-input::placeholder { color: #767e99; }
.ge-input:focus:not(:focus-visible) { outline: none; }

/* Textarea variant */
textarea.ge-input {
  resize: vertical;
  min-height: 100px;
}

/* Select variant — custom chevron arrow via SVG data-URI */
select.ge-input {
  appearance: none;
  cursor: pointer;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23d9460f' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-color: transparent;
}

/* Compatibility alias — used by JS to avoid breaking changes */
.ge-fieldset { border: none; padding: 0; margin: 0; }

/* ── 5. FIELD HINT & INLINE ERROR ── */
/* Small descriptive text beneath a field */
.ge-hint {
  font-size: 11.5px;
  color: #4a5a78;
  margin-top: 6px;
  line-height: 1.5;
}
.ge-hint a { color: #2a347d; font-weight: 600; }

/* Inline validation error message (shown via JS) */
.ge-error-msg {
  font-size: 12px;
  color: #d9460f;
  margin-top: 5px;
  display: none;
}
.ge-error-msg i { margin-right: 4px; }

/* ── 6. GRID LAYOUTS ── */
/* 2-column responsive row */
.ge-row   { display: grid; grid-template-columns: 1fr 1fr;       gap: 16px; }
/* 3-column responsive row */
.ge-row--3 { display: grid; grid-template-columns: 1fr 1fr 1fr;  gap: 16px; }
@media (max-width: 640px) {
  .ge-row, .ge-row--3 { grid-template-columns: 1fr; }
}

/* ── 7. THEMATIC CHECKBOXES ── */
/* Grid of bordered checkbox labels (2-column) */
.thematiques-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 8px;
}
@media (max-width: 640px) { .thematiques-grid { grid-template-columns: 1fr; } }

/* Individual checkbox label — visually styled as a card */
.thematique-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid #c8cdd8;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #1a2233;
  background: #fff;
  transition: border-color .15s, background .15s;
  user-select: none;
  min-height: 52px;
}
.thematique-checkbox:hover { border-color: #2a347d; background: #f5f6fb; }

/* Native checkbox styled with accent-color */
.thematique-checkbox input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: #2a347d;
  flex-shrink: 0;
  cursor: pointer;
}

/* Active state when box is checked */
.thematique-checkbox.is-checked {
  border-color: #2a347d;
  background: rgba(42,52,125,.05);
}

/* Validation error state on the whole grid */
.thematiques-grid.is-invalid .thematique-checkbox { border-color: #d9460f; }

/* Icon inside each checkbox label */
.thematique-checkbox .tc-icon { color: #2a347d; font-size: 14px; flex-shrink: 0; }

/* ── 8. GPS BUTTON ── */
/* Row: lat field | lng field | "My location" button */
.gps-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: end; }
@media (max-width: 640px) { .gps-row { grid-template-columns: 1fr; } }

/* Geolocation trigger button */
.gps-btn {
  height: 56px;
  padding: 0 20px;
  background: #2a347d;
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
  display: flex; align-items: center; gap: 8px;
}
.gps-btn:hover    { background: #1e276b; }
.gps-btn:disabled { opacity: .6; cursor: default; }

/* ── 9. FUNDER MULTI-SELECT ── */
/* 2-column grid of bordered funder checkboxes */
.financeurs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 24px;
  margin-top: 4px;
}
@media (max-width: 600px) { .financeurs-grid { grid-template-columns: 1fr; } }

/* Individual funder checkbox label */
.financeur-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: #1a2233;
  cursor: pointer;
  padding: 9px 12px;
  border: 1px solid #e4e8f0;
  background: #fff;
  transition: border-color .15s, background .15s;
  user-select: none;
}
.financeur-check:hover { border-color: #2a347d; background: #f5f6fb; }

/* Native checkbox */
.financeur-check input[type="checkbox"] {
  accent-color: #2a347d;
  width: 16px; height: 16px;
  flex-shrink: 0; cursor: pointer;
}

/* Checked state — blue border + subtle highlight */
.financeur-check.is-checked {
  border-color: #2a347d;
  background: rgba(42,52,125,.05);
  font-weight: 600;
}

/* Group heading label spanning both columns */
.financeur-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #4a5a78;
  margin: 16px 0 6px;
  grid-column: 1 / -1;
}

/* "Self-funded" single checkbox row (full width) */
.autofinance-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid #e4e8f0;
  background: #fff;
  cursor: pointer;
  width: fit-content;
  transition: border-color .15s;
  font-size: 13.5px;
  font-weight: 500;
  color: #1a2233;
}
.autofinance-row:hover { border-color: #2a347d; }
.autofinance-row input { accent-color: #2a347d; width: 16px; height: 16px; cursor: pointer; }

/* ── 10. UPLOAD ZONES ── */
/* Drag-and-drop area for image or PDF uploads */
.ge-upload-zone {
  border: 1px solid #c8cdd8;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  position: relative;
  background: #fafbfc;
  min-height: 100px;
}
.ge-upload-zone:hover      { border-color: #2a347d; background: #f5f6fb; }
.ge-upload-zone.has-file   { border-color: #2a347d; }
.ge-upload-zone.is-invalid { border-color: #d9460f; background: rgba(217,70,15,.02); }

/* Hidden native file input covers the whole zone */
.ge-upload-zone input[type="file"] {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
}

/* Visual elements inside the upload zone */
.ge-upload-zone__icon  { font-size: 30px; color: #c8cdd8; margin-bottom: 10px; }
.ge-upload-zone__label { font-size: 14px; font-weight: 600; color: #2a347d; }
.ge-upload-zone__sub   { font-size: 12px; color: #4a5a78; margin-top: 4px; }

/* Selected file name (shown by JS after selection) */
.ge-upload-zone .file-name {
  font-size: 13px; color: #2a347d; font-weight: 600;
  margin-top: 10px; display: none; word-break: break-all;
}
.ge-upload-zone .file-size { font-size: 11px; color: #4a5a78; }

/* Image preview after selection */
.img-preview-wrap { margin-top: 12px; display: none; }
.img-preview-wrap img { max-width: 100%; max-height: 160px; display: block; margin: 0 auto; }
.img-dimensions { font-size: 11px; color: #4a5a78; margin-top: 4px; }

/* ── 11. RGPD CONSENT BLOCK ── */
/* Light-grey background box containing the GDPR checkboxes */
.rgpd-block {
  padding: 18px 20px;
  background: #f5f6fb;
  border: 1px solid #dde3ec;
  margin-top: 12px;
}

/* Full-width clickable consent label */
.rgpd-label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 14px;
  color: #3a4a6b;
  cursor: pointer;
  line-height: 1.6;
  border: 2px solid transparent;
  border-radius: 4px;
  padding: 10px 12px;
  transition: border-color .2s, background .2s;
}
/* Validation error state — red border */
.rgpd-label.is-invalid {
  border-color: #d9460f;
  background: rgba(217,70,15,.04);
}
.rgpd-label.is-invalid input {
  outline: 2px solid #d9460f;
  outline-offset: 1px;
}

/* Inline RGPD error message */
.rgpd-error {
  font-size: 12px;
  color: #d9460f;
  margin-top: 5px;
  display: none;
}
/* Show error when the label has is-invalid */
.rgpd-label.is-invalid + .rgpd-error { display: block; }

/* Checkbox inside RGPD label */
.rgpd-label input {
  margin-top: 3px; flex-shrink: 0;
  accent-color: #2a347d;
  width: 18px; height: 18px; cursor: pointer;
}

/* ── 12. CHARACTER COUNTER ── */
/* Right-aligned counter shown below each textarea */
.char-counter {
  font-size: 11px; color: #b0bad0;
  text-align: right; margin-top: 3px;
}
/* Warning color when limit is exceeded */
.char-counter.warn { color: #d9460f; }

/* ── 13. LOADER ── */
/* Spinner shown while the form is being submitted */
.form-loader {
  display: none; text-align: center;
  padding: 28px; color: #2a347d;
  font-weight: 700; font-size: 15px;
}
.form-loader i { font-size: 32px; display: block; margin-bottom: 12px; }

/* ── 14. SUCCESS MESSAGE ── */
/* Shown after a successful form submission */
.success-msg {
  display: none;
  background: rgba(185,225,0,.08);
  border: 2px solid #b9e100;
  padding: 48px 36px;
  text-align: center;
  margin-top: 24px;
}
.success-msg i { font-size: 52px; color: #2a347d; margin-bottom: 18px; display: block; }
.success-msg h2 {
  font-size: 26px; font-weight: 800; color: #2a347d; margin-bottom: 10px;
  font-family: 'Cabinet Grotesk', sans-serif;
}
.success-msg p { font-size: 15px; color: #3a4a6b; line-height: 1.6; }

/* Reference ID chip shown after successful submission */
.success-ref {
  display: inline-block; margin-top: 18px;
  font-size: 13px; color: #4a5a78; background: #f2f3f5;
  padding: 7px 16px; letter-spacing: .3px;
}

/* ── 15. ERROR BANNER ── */
/* Full-width validation error banner at the top of the form */
.error-banner {
  display: none;
  background: rgba(217,70,15,.07);
  border: 1.5px solid #d9460f;
  padding: 14px 20px;
  font-size: 14px; color: #a33210;
  margin-bottom: 24px;
}
.error-banner i { margin-right: 8px; }

/* ── 16. ACTION BUTTONS ── */
/* Button row at the bottom of the form */
.form-actions {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 28px;
  border-top: 1px solid #e4e8f0;
}

/* Primary submit button */
.btn-submit {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 36px;
  background: #2a347d; color: #fff;
  border: none; cursor: pointer;
  font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px;
  font-family: 'Satoshi', system-ui, sans-serif;
  transition: background .15s;
  min-height: 52px;
}
.btn-submit:hover:not(:disabled) { background: #1e276b; }
.btn-submit:disabled { opacity: .5; cursor: not-allowed; }

/* Secondary "back" link button */
.btn-back {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 28px;
  border: 2px solid #2a347d; background: #fff; color: #2a347d;
  font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px;
  text-decoration: none; cursor: pointer;
  font-family: 'Satoshi', system-ui, sans-serif;
  transition: all .15s; min-height: 52px;
}
.btn-back:hover { background: #2a347d; color: #fff; }