/* Identité visuelle F3DP (Charte graphique 2025) */

@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Light.ttf'); font-weight: 300; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Regular.ttf'); font-weight: 400; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Medium.ttf'); font-weight: 500; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-SemiBold.ttf'); font-weight: 600; }
@font-face { font-family: 'Nata Sans'; src: url('fonts/NataSans-Regular.ttf'); font-weight: 400; }
@font-face { font-family: 'Nata Sans'; src: url('fonts/NataSans-Medium.ttf'); font-weight: 500; }

:root {
  --f3dp-turquoise: #10c495;
  --f3dp-turquoise-dim: #0d9c78;
  --f3dp-turquoise-wash: #10c49522;
  --f3dp-gris: #232323;
  --f3dp-panel: #2a2a2a;
  --f3dp-panel-alt: #303030;
  --f3dp-line: #3d3d3d;
  --f3dp-blanc: #ffffff;
  --f3dp-dim: #9a9a9a;
  --f3dp-err: #e05252;
  --f3dp-warn: #e0a52d;
  --font-title: 'Montserrat', sans-serif;
  --font-body: 'Nata Sans', 'Montserrat', sans-serif;
}

body.f3dp {
  background: var(--f3dp-gris);
  color: var(--f3dp-blanc);
  font-family: var(--font-body);
}

/* Largeur FIXE (pas %) pour que l'accent diagonal reste un petit repère de
   coin, quelle que soit la largeur de la fenêtre -- en %, il s'étirait sur
   les grands écrans jusqu'à passer sous le sous-titre (illisible dessus). */
.f3dp-header {
  position: relative;
  overflow: hidden;
  background: var(--f3dp-gris);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px 14px 90px;
}
.f3dp-header::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 70px;
  background: var(--f3dp-turquoise);
  clip-path: polygon(0 0, 100% 0, 45% 100%, 0 100%);
}
.f3dp-header img { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); height: 24px; }
.f3dp-header .title {
  position: relative;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
}
.f3dp-header .subtitle {
  position: relative;
  font-size: 11px;
  color: var(--f3dp-dim);
  margin-top: 1px;
}

.f3dp-section-label {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--f3dp-turquoise);
  margin: 0 0 10px;
}

.f3dp-panel {
  background: var(--f3dp-panel);
  border: 1px solid var(--f3dp-line);
  border-radius: 10px;
  padding: 16px;
}

.f3dp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  background: var(--f3dp-panel-alt);
}
.f3dp-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--f3dp-dim); }
.f3dp-pill.on .dot { background: var(--f3dp-turquoise); box-shadow: 0 0 6px var(--f3dp-turquoise); }
.f3dp-pill.off .dot { background: var(--f3dp-err); }
.f3dp-pill.on { color: var(--f3dp-turquoise); }
.f3dp-pill.off { color: var(--f3dp-err); }
.f3dp-pill.sim .dot { background: var(--f3dp-warn); }
.f3dp-pill.sim { color: var(--f3dp-warn); }

.f3dp-pill-group { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.f3dp-pill-group.row { flex-direction: row; align-items: center; }

.f3dp-btn {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 12.5px;
  border-radius: 8px;
  border: 1px solid var(--f3dp-line);
  background: var(--f3dp-panel-alt);
  color: var(--f3dp-blanc);
  padding: 9px 14px;
  cursor: pointer;
}
.f3dp-btn:hover { border-color: var(--f3dp-turquoise); }
.f3dp-btn-primary {
  background: var(--f3dp-turquoise);
  border-color: var(--f3dp-turquoise);
  color: var(--f3dp-gris);
}
.f3dp-btn-primary:hover { background: var(--f3dp-turquoise-dim); }

.f3dp-field {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 7px; font-size: 12.5px; color: var(--f3dp-blanc);
}
.f3dp-field input {
  width: 130px;
  background: var(--f3dp-gris);
  border: 1px solid var(--f3dp-line);
  color: var(--f3dp-blanc);
  border-radius: 6px;
  padding: 5px 8px;
  font-family: var(--font-body);
  font-size: 12.5px;
}
.f3dp-field input:focus { outline: none; border-color: var(--f3dp-turquoise); }
.f3dp-field input[type="checkbox"] {
  width: 16px; height: 16px; padding: 0; flex: none;
  accent-color: var(--f3dp-turquoise);
}

.f3dp-group {
  border: 1px solid var(--f3dp-line);
  border-radius: 8px;
  margin: 0 0 12px;
  padding: 10px 12px;
}
.f3dp-group-label {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--f3dp-dim);
  margin-bottom: 8px;
}