/* ==============================  
   Variables globales
============================== */
:root {
  /* Couleurs principales */
  --color-bg: #d9d9d9;
  --color-card: #d9d9d9;
  --color-text: #00008b;
  --color-muted: #b5b5b5;
  --color-primary: #00008b;         /* bleu par défaut */
  --color-primary-hover: #005582;
  --color-selected: #FFD700;        /* jaune pour sélection */
  --color-border: #3a3a3a;
  --color-dark: #111;
  --color-dark-bg: #121212;
  --color-white: #fff;
  --color-black: #000;
  --color-error: #e11;

  /* Bordures & arrondis */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Ombres */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.25);
  --shadow-md: 0 4px 15px rgba(0,0,0,.3);

  /* Espacements */
  --space-xs: 5px;
  --space-sm: 8px;
  --space-md: 10px;
  --space-lg: 12px;
  --space-xl: 20px;
  --space-xxl: 25px;

  /* Dimensions */
  --input-width: 90px;
  --viewer-height: 700px;

  /* Typographie */
  --font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-size-base: 1rem;
  --font-size-sm: .9rem;
  --font-size-lg: 1.2rem;
  --font-weight-bold: 600;

  /* Z-index */
  --z-modal: 9999;
}

/* ==============================
   Reset & Base
============================== */
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: var(--space-xl);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
}

.hidden {
  display: none!important;
}

/* ==============================
   Layout principal
============================== */
.app-container {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 24px;
  align-items: start;
}

/* ==============================
   Cartes
============================== */
.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}

.card h2 {
  margin: 0 0 var(--space-lg);
}

/* ==============================
   Boutons
============================== */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

button {
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-md) 14px;
  background: var(--color-primary);
  color: var(--color-white);
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
  font-weight: var(--font-weight-bold);
}

button:hover {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
}

button.selected {
  background: var(--color-selected);
  color: var(--color-black);
}

button.primary, button.secondary {
  background: var(--color-primary);
  color: var(--color-white);
}

button.secondary:hover {
  background: #4a4a4a;
}

/* ==============================
   Contrôles dimensions
============================== */
.dimension-control {
  margin: 14px 0;
}

.dimension-control label {
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: var(--font-weight-bold);
}

.dim-inputs {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

input[type="range"] {
  width: 100%;
  accent-color: var(--color-primary);
}

.number-group {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg);
}

.number-group input {
  width: var(--input-width);
  padding: var(--space-sm) var(--space-md);
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text);
  text-align: right;
}

.number-group .unit {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-dark);
  color: var(--color-muted);
  border-left: 1px solid var(--color-border);
}

/* ==============================
   Viewer
============================== */
.viewer-panel {
  position: sticky;
  top: var(--space-xl);
  align-self: start;
}

.viewer-frame {
  width: 100%;
  height: var(--viewer-height);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-dark-bg);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.viewer-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.viewer-placeholder {
  color: var(--color-muted);
  text-align: center;
  padding: var(--space-lg);
}

.viewer-note {
  margin-top: var(--space-md);
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  text-align: center;
  font-style: italic;
}

/* ==============================
   Modale
============================== */
.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: var(--z-modal);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
}

.modal-content {
  background: var(--color-white);
  color: var(--color-black);
  padding: var(--space-xxl);
  border-radius: var(--radius-lg);
  width: 400px;
  max-width: 90%;
  position: relative;
  box-shadow: var(--shadow-md);
}

.close {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 24px;
  cursor: pointer;
  color: var(--color-primary);
}

.close:hover {
  color: var(--color-primary-hover);
}

/* ==============================
   Formulaire
============================== */
.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-xs);
}

.form-group input,
.form-group select {
  width: 100%;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid #ccc;
}

.btn-submit {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 16px;
}

.btn-submit:hover {
  background: var(--color-primary-hover);
}

.input-error {
  border: 2px solid var(--color-error);
  outline: none;
}

.error-msg {
  color: var(--color-error);
  font-size: var(--font-size-sm);
  margin-top: .25rem;
  display: none;
}

/* ==============================
   Responsive
============================== */
@media (max-width: 1000px) {
  .app-container {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  body {
    padding: var(--space-md);
  }

  .viewer-panel {
    position: static;
  }
}

@media (max-width: 768px) {
  :root {
    --viewer-height: 400px;
  }

  button {
    width: 100%; 
    max-width: 250px;
    margin: 0 auto;
  }

  .btn-row {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 600px) {
  .dim-inputs {
    flex-direction: column;
    align-items: stretch;
  }

  .number-group input {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .modal-content {
    width: 90%;
    padding: var(--space-lg);
  }
}