/* ============================================================================
   AUTOM'MATH — Refonte UX/UI des formulaires d'administration (change forms).
   S'applique à TOUTES les fiches admin. Restylage non-intrusif : on ne touche
   pas au markup Django (sauvegarde / erreurs / inlines intacts), on transforme
   l'apparence en cartes + grilles denses.
   Palette : marine #12223c · bleu #2f6fb0 · cyan #3fa7e0 · vert #0ea88a · ambre.
   ============================================================================ */

:root{
  --am-navy:#12223c; --am-blue:#2f6fb0; --am-cyan:#3fa7e0; --am-green:#0ea88a;
  --am-amber:#b7791f; --am-ink:#243447; --am-muted:#7a8698; --am-line:#e5e9ef; --am-bg:#eef1f5;
}

/* Fond + largeur de contenu */
body.change-form #content, body.change-form .content{ background:var(--am-bg); }
.change-form #content-main{ max-width:1180px; }

/* --- Titre de page + fil d'ariane discrets --- */
.change-form #content h1{ font-size:20px; font-weight:800; color:var(--am-navy); }

/* --- Chaque fieldset devient une CARTE --- */
.change-form fieldset.module{
  background:#fff; border:1px solid var(--am-line); border-radius:14px;
  box-shadow:0 2px 10px rgba(15,44,73,.05); margin:0 0 16px; padding:0; overflow:hidden;
}
.change-form fieldset.module > h2{
  margin:0; padding:13px 18px; font-size:13px; font-weight:800; color:var(--am-navy);
  letter-spacing:.02em; text-transform:none; background:#f7f9fc; border-bottom:1px solid var(--am-line);
}
.change-form fieldset.module .description{
  padding:11px 18px 0; color:var(--am-muted); font-size:12.5px; line-height:1.5;
}

/* --- Lignes de champs : grille dense, libellé au-dessus ---
   IMPORTANT : enfants DIRECTS uniquement (`>`) → n'affecte PAS les lignes
   `<tr class="form-row">` des tableaux inline (abaque / cotes de pose), qui
   seraient cassées par un display:flex. */
.change-form fieldset.module > .form-row{
  padding:12px 18px; border-bottom:1px solid #f1f3f6; display:flex; gap:20px; flex-wrap:wrap;
}
.change-form fieldset.module > .form-row:last-child{ border-bottom:0; }
.change-form fieldset.module > .form-row > div,
.change-form fieldset.module > .form-row .fieldBox{ flex:1 1 200px; min-width:0; }
.change-form .form-row label{
  display:block; float:none; width:auto; font-size:11.5px; font-weight:700;
  color:var(--am-muted); margin:0 0 4px; padding:0; line-height:1.3; text-align:left;
}
.change-form .form-row label:after{ content:""; }
/* Champs de saisie */
.change-form .form-row input[type=text],
.change-form .form-row input[type=number],
.change-form .form-row input[type=email],
.change-form .form-row input[type=url],
.change-form .form-row select,
.change-form .form-row textarea{
  border:1px solid #cdd9e6; border-radius:9px; padding:8px 11px; font-size:13.5px;
  color:var(--am-ink); background:#fff; max-width:100%;
}
.change-form .form-row input:focus,
.change-form .form-row select:focus,
.change-form .form-row textarea:focus{ border-color:var(--am-blue); outline:0; box-shadow:0 0 0 3px rgba(47,111,176,.12); }
.change-form .form-row .help, .change-form .form-row .helptext{
  margin:5px 0 0; padding:0; font-size:11px; color:#9aa4b0; line-height:1.4;
}
.change-form .form-row.errors input, .change-form .form-row.errors select{ border-color:#c0392b; }

/* --- Sections repliables (collapse Django) --- */
/* Repliée : la carte devient une simple barre d'en-tête cliquable (pas de cadre vide,
   pas de trait sous le titre, pas d'ombre superflue). */
.change-form fieldset.module.collapsed{ box-shadow:none; }
.change-form fieldset.module.collapsed > h2{ background:#f7f9fc; border-bottom:0; border-radius:14px; }
/* Masque le contenu quand replié (notre .form-row:flex étant plus spécifique que la
   règle de Django, il faut re-masquer explicitement les lignes et la description). */
.change-form fieldset.module.collapsed > .form-row,
.change-form fieldset.module.collapsed > .description{ display:none !important; }
.change-form fieldset.module.collapse .collapse-toggle{
  color:var(--am-blue); font-weight:700; text-transform:none; font-size:11.5px;
}
/* Dépliée : le titre retrouve son trait de séparation. */
.change-form fieldset.module.collapse:not(.collapsed) > h2{ border-bottom:1px solid var(--am-line); border-radius:0; }

/* --- TARIFICATION : fieldset .am-prices → tuiles PA / marge / PV --- */
.change-form fieldset.module.am-prices > h2{ background:#12223c; color:#fff; }
.change-form fieldset.module.am-prices .form-row{ border-bottom:0; }
.change-form fieldset.module.am-prices .fieldBox{
  background:#f4f6f9; border:1px solid var(--am-line); border-radius:12px; padding:11px 14px; flex:1 1 150px;
}
.change-form fieldset.module.am-prices .fieldBox.field-prix_vente_ht{ background:#12223c; }
.change-form fieldset.module.am-prices .fieldBox.field-prix_vente_ht label{ color:#9fc0e6; }
.change-form fieldset.module.am-prices .fieldBox.field-prix_vente_ht input{ font-weight:800; }
.change-form fieldset.module.am-prices .fieldBox.field-marge_affichee{ background:#fff7e8; border-color:#f0dcae; }
.change-form fieldset.module.am-prices .fieldBox.field-marge_affichee label{ color:#8a6a1e; }
.change-form fieldset.module.am-prices input{ width:100%; font-size:16px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
.change-form fieldset.module.am-prices .readonly{ font-size:16px; font-weight:800; color:#8a6a1e; text-align:right; }

/* --- Booléens (options) plus lisibles --- */
.change-form .form-row .checkbox-row label,
.change-form .form-row label[for$="supporte_batterie"],
.change-form .form-row input[type=checkbox]{ display:inline-block; }
.change-form .form-row.field-actif, .change-form .form-row.field-donnees_a_verifier{ align-items:center; }

/* --- Aperçu photo (readonly) --- */
.change-form .form-row.field-photo_preview img{ border-radius:8px; border:1px solid var(--am-line); }

/* --- Inlines (tables abaque / cotes de pose) en carte --- */
.change-form .inline-group{ background:#fff; border:1px solid var(--am-line); border-radius:14px; overflow:hidden; box-shadow:0 2px 10px rgba(15,44,73,.05); margin-bottom:16px; }
.change-form .inline-group > h2, .change-form .inline-group .tabular caption{
  background:#f7f9fc; color:var(--am-navy); font-weight:800; font-size:13px; padding:12px 18px; border-bottom:1px solid var(--am-line); text-transform:none;
}
.change-form .inline-group .tabular table thead th{ background:#fbfcfd; color:var(--am-muted); font-size:11px; }

/* --- Barre de boutons (submit-row) --- */
.change-form .submit-row{
  background:#fff; border:1px solid var(--am-line); border-radius:14px; padding:14px 18px;
  box-shadow:0 2px 10px rgba(15,44,73,.05); display:flex; gap:10px; align-items:center;
}
.change-form .submit-row input[name=_save]{
  background:var(--am-green); border-radius:9px; padding:10px 20px; font-weight:800; border:0;
}
.change-form .submit-row input{ border-radius:9px; }

/* ============================================================================
   FICHE KIT — gabarit dédié .amk (maquette validée) : tuiles prix, grille de
   puces pour les caractéristiques, pastilles d'options, sections repliables.
   ============================================================================ */
.amk{ max-width:1180px; }
.amk-card{ background:#fff; border:1px solid var(--am-line); border-radius:14px; box-shadow:0 2px 10px rgba(15,44,73,.05); margin-bottom:16px; overflow:hidden; }
.amk-h{ padding:13px 18px; font-size:13px; font-weight:800; color:var(--am-navy); background:#f7f9fc; border-bottom:1px solid var(--am-line); display:flex; align-items:center; justify-content:space-between; user-select:none; }
.amk-col .amk-h{ cursor:pointer; }
.amk-tog{ font-size:11px; color:var(--am-blue); font-weight:700; }
.amk-body{ padding:16px 18px; }
.amk-col .amk-body{ display:none; }
.amk-col.open .amk-body{ display:block; }
.amk-col:not(.open) .amk-h{ border-bottom:0; }
.amk-desc{ color:var(--am-muted); font-size:12.5px; margin-bottom:12px; line-height:1.5; }
.amk-fields{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
@media(max-width:820px){ .amk-fields{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.amk-f{ background:#fbfcfd; border:1px solid var(--am-line); border-radius:10px; padding:9px 11px; min-width:0; }
.amk-f > label{ display:block; font-size:11px; font-weight:700; color:var(--am-muted); margin-bottom:4px; }
.amk-f input[type=text],.amk-f input[type=number],.amk-f input[type=email],.amk-f input[type=url],
.amk-f select,.amk-f textarea{ width:100%; border:1px solid #cdd9e6; border-radius:8px; padding:7px 10px; font-size:13.5px; box-sizing:border-box; color:var(--am-ink); background:#fff; }
.amk-f input:focus,.amk-f select:focus,.amk-f textarea:focus{ border-color:var(--am-blue); outline:0; box-shadow:0 0 0 3px rgba(47,111,176,.12); }
.amk-f textarea{ min-height:80px; resize:vertical; }
.amk-help{ font-size:10.5px; color:#9aa4b0; margin-top:4px; line-height:1.35; }
.amk-ro{ font-size:15px; font-weight:800; color:var(--am-navy); }
.amk-err input,.amk-err select{ border-color:#c0392b; }
/* Champs larges (textarea, m2m, photo) sur toute la largeur */
.amk-f:has(textarea), .amk-f:has(select[multiple]), .amk-f:has(input[type=file]){ grid-column:1 / -1; }

/* Tarification en tuiles */
.amk-prices .amk-h{ background:var(--am-navy); color:#fff; border-bottom:0; }
.amk-prices .amk-f input{ text-align:right; font-weight:800; font-size:17px; font-variant-numeric:tabular-nums; }
.amk-prices .amk-f:nth-child(4){ background:var(--am-navy); border-color:var(--am-navy); }
.amk-prices .amk-f:nth-child(4) > label{ color:#9fc0e6; }
.amk-prices .amk-f:nth-child(4) .amk-help{ color:#7f9ec6; }
.amk-prices .amk-f:nth-child(5){ background:#fff7e8; border-color:#f0dcae; }
.amk-prices .amk-f:nth-child(5) > label{ color:#8a6a1e; }
.amk-prices .amk-f:nth-child(5) .amk-ro{ color:#0a7a55; font-size:18px; }

/* Options en pastilles */
.amk-opts .amk-fields{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.amk-opts .amk-fchk{ background:#f6f7f9; }
.amk-opts .amk-chk{ cursor:pointer; }
.amk-opts .amk-chk input{ width:17px; height:17px; accent-color:var(--am-green); }

/* Caractéristiques non renseignées : atténuées (maquette) */
.amk-specs .amk-f.amk-empty{ background:#f6f7f9; border-style:dashed; }
.amk-specs .amk-f.amk-empty > label{ color:#aab3bd; }
.amk-specs .amk-f.amk-empty input{ color:#c3ccd6; }