/* =============================================================================
   SORA Tech PWA -- Module 1 G4.1a.5
   Mobile-first design (iPhone 14/15 logical 390x844, safe-area inset).
   Charte SORA (--sora-blue, --sora-orange) coherent admin.css mais layout
   ADAPTE mobile : pas de sidebar, pleine largeur, touch targets >= 44px.
   ============================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens (palette + typo + spacing)
   ------------------------------------------------------------------------- */
:root {
  /* Couleurs SORA (cohere admin.css) */
  --sora-blue: #28297D;
  --sora-blue-dark: #1F2069;
  --sora-blue-darker: #181961;
  --sora-orange: #E85D2C;
  --sora-orange-dark: #C84A21;

  /* Couleurs PA (cohere admin.css, V2 si beso PA mobile) */
  --pa-blue: #1F2D5A;
  --pa-red: #E94E1B;

  /* Grays */
  --white: #ffffff;
  --gray-50: #f8f9fb;
  --gray-100: #f1f3f7;
  --gray-200: #e5e8ee;
  --gray-300: #cfd4de;
  --gray-400: #9ea5b3;
  --gray-500: #6c7280;
  --gray-600: #4b5563;
  --gray-700: #2f343d;
  --gray-900: #111418;

  /* Etats */
  --success: #2da44e;
  --warning: #d97706;
  --danger:  #c0392b;
  --info:    #2563eb;

  /* Typo */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text',
               'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* Tailles (mobile-first) */
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-md:  16px;  /* base mobile, evite zoom iOS au focus input */
  --fs-lg:  18px;
  --fs-xl:  22px;
  --fs-2xl: 28px;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* Touch target minimum WCAG 2.5.5 */
  --touch-min: 44px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

/* -------------------------------------------------------------------------
   2. Reset minimal + globals
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--gray-900);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body.tech-bg {
  background: var(--gray-50);
  min-height: 100vh;
  min-height: 100dvh;
}

body.tech-bg-gradient {
  background: linear-gradient(135deg, var(--sora-blue) 0%, var(--sora-blue-darker) 100%);
}

/* -------------------------------------------------------------------------
   3. Auth layout (login)
   ------------------------------------------------------------------------- */
.tech-auth-main {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.tech-auth-card {
  width: 100%;
  max-width: 440px;
  margin: var(--sp-4);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.20);
}

.tech-auth-header {
  text-align: center;
  margin-bottom: var(--sp-6);
}

.tech-auth-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--sp-3);
  border-radius: var(--radius-md);
  background: var(--gray-100);
  overflow: hidden;
}

.tech-auth-brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tech-auth-title {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--sora-blue);
  letter-spacing: -0.02em;
}

.tech-auth-subtitle {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--gray-500);
}

.tech-auth-form {
  margin-top: var(--sp-4);
}

.tech-auth-footer {
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--gray-500);
  text-align: center;
}

/* -------------------------------------------------------------------------
   4. Form (mobile-first)
   ------------------------------------------------------------------------- */
.tech-form-group {
  margin-bottom: var(--sp-4);
}

.tech-form-label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gray-700);
}

.tech-form-input {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-md);    /* 16px : evite zoom iOS au focus */
  line-height: 1.4;
  color: var(--gray-900);
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.tech-form-input:focus {
  outline: none;
  border-color: var(--sora-blue);
  box-shadow: 0 0 0 3px rgba(40, 41, 125, 0.15);
}

.tech-form-input::placeholder {
  color: var(--gray-400);
}

/* -------------------------------------------------------------------------
   5. Buttons (touch-friendly)
   ------------------------------------------------------------------------- */
.tech-btn-primary,
.tech-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 600;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.05s ease;
  -webkit-appearance: none;
  appearance: none;
}

.tech-btn-primary {
  background: var(--sora-orange);
  color: var(--white);
}

.tech-btn-primary:hover { background: var(--sora-orange-dark); }
.tech-btn-primary:active { transform: scale(0.98); }

.tech-btn-block {
  width: 100%;
  margin-top: var(--sp-2);
}

.tech-btn-ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.5);
  min-height: 36px;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
}

.tech-btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }
.tech-btn-ghost:active { transform: scale(0.98); }

/* -------------------------------------------------------------------------
   6. Flash (alerts)
   ------------------------------------------------------------------------- */
.tech-flash {
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.tech-flash-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.tech-flash-success {
  background: #f0fdf4;
  color: #14532d;
  border: 1px solid #bbf7d0;
}

.tech-flash-info {
  background: #eff6ff;
  color: #1e3a8a;
  border: 1px solid #bfdbfe;
}

/* -------------------------------------------------------------------------
   7. Header dashboard
   ------------------------------------------------------------------------- */
.tech-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  padding-top: calc(var(--sp-3) + env(safe-area-inset-top));
  background: var(--sora-blue);
  color: var(--white);
}

.tech-header-brand {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.tech-header-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.tech-header-subtitle {
  font-size: var(--fs-xs);
  opacity: 0.7;
}

.tech-header-logout-form { margin: 0; }

.tech-header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Banner enrollement biometric (G4.1b.7) */
.tech-biometric-banner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding: var(--sp-4);
  border-left: 4px solid var(--sora-orange);
  background: linear-gradient(135deg, #fff8f4 0%, #fffaf6 100%);
}

.tech-biometric-banner-icon {
  font-size: 32px;
  line-height: 1;
}

.tech-biometric-banner-content {
  flex: 1;
}

.tech-biometric-banner-title {
  display: block;
  font-size: var(--fs-md);
  color: var(--sora-blue);
  margin-bottom: 2px;
}

.tech-biometric-banner-detail {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--gray-700);
  line-height: 1.4;
}

.tech-biometric-banner-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.tech-biometric-banner-actions .tech-btn-primary {
  flex: 1;
  text-decoration: none;
}

.tech-biometric-banner-dismiss {
  margin: 0;
}

@media (min-width: 600px) {
  .tech-biometric-banner {
    flex-direction: row;
    align-items: center;
  }
  .tech-biometric-banner-actions .tech-btn-primary { flex: 0 0 auto; }
}

/* -------------------------------------------------------------------------
   8. Main + cards (dashboard placeholder)
   ------------------------------------------------------------------------- */
.tech-main {
  padding: var(--sp-4);
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  max-width: 600px;
  margin: 0 auto;
}

.tech-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: var(--sp-5);
}

.tech-placeholder-card {
  text-align: center;
  margin-top: var(--sp-6);
}

.tech-placeholder-icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: var(--sp-3);
}

.tech-placeholder-title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--sora-blue);
}

.tech-placeholder-detail {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-md);
  color: var(--gray-700);
  line-height: 1.5;
}

.tech-text-muted { color: var(--gray-500); font-size: var(--fs-sm); }

/* -------------------------------------------------------------------------
   9. Helpers G4.1b
   ------------------------------------------------------------------------- */
.tech-hidden { display: none !important; }

.tech-text-small { font-size: var(--fs-sm); }

/* -------------------------------------------------------------------------
   10. Login multi-step (G4.1b)
   ------------------------------------------------------------------------- */
.tech-auth-step {
  margin-top: var(--sp-2);
}

.tech-auth-step-recap {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  background: var(--gray-100);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tech-auth-step-recap-label {
  color: var(--gray-500);
  font-size: var(--fs-xs);
}

.tech-auth-step-recap-value {
  color: var(--gray-900);
  font-weight: 600;
  word-break: break-all;
}

.tech-btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--sora-blue);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tech-btn-link:hover { color: var(--sora-blue-dark); }
.tech-btn-link:active { transform: scale(0.98); }

/* -------------------------------------------------------------------------
   11. Page biometric (gestion credentials)
   ------------------------------------------------------------------------- */
.tech-biometric-intro {
  margin-bottom: var(--sp-5);
}

.tech-biometric-title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--sora-blue);
}

.tech-biometric-detail {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-md);
  color: var(--gray-700);
  line-height: 1.5;
}

.tech-section-title {
  margin: var(--sp-5) 0 var(--sp-3);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--gray-900);
}

.tech-biometric-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.tech-biometric-card {
  padding: var(--sp-4);
}

.tech-biometric-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.tech-biometric-card-icon {
  font-size: 28px;
  line-height: 1;
}

.tech-biometric-card-name {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--gray-900);
  flex: 1;
}

.tech-biometric-card-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-1) var(--sp-3);
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
}

.tech-biometric-card-meta dt {
  color: var(--gray-500);
}

.tech-biometric-card-meta dd {
  margin: 0;
  color: var(--gray-900);
}

.tech-biometric-card-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--gray-200);
}

.tech-biometric-rename-form {
  display: flex;
  gap: var(--sp-2);
  align-items: stretch;
}

.tech-biometric-rename-input {
  flex: 1;
  min-height: 40px;
  font-size: var(--fs-sm);
}

.tech-biometric-delete-form {
  margin: 0;
}

.tech-biometric-empty {
  text-align: center;
  padding: var(--sp-5) var(--sp-4);
}

.tech-btn-secondary,
.tech-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--white);
}

.tech-btn-secondary {
  color: var(--sora-blue);
}

.tech-btn-secondary:hover { background: var(--gray-100); }
.tech-btn-secondary:active { transform: scale(0.98); }

.tech-btn-danger {
  width: 100%;
  color: var(--danger);
  border-color: #fecaca;
}

.tech-btn-danger:hover { background: #fef2f2; }
.tech-btn-danger:active { transform: scale(0.98); }

@media (min-width: 600px) {
  .tech-biometric-card-actions {
    flex-direction: row;
    align-items: stretch;
  }
  .tech-biometric-rename-form { flex: 1; }
  .tech-biometric-delete-form { width: 140px; }
}

/* -------------------------------------------------------------------------
   12. Dashboard 1.2 (G4.2) -- greeting, hero card, actions row, liste compacte
   ------------------------------------------------------------------------- */

/* Header greeting (remplace title/subtitle pour dashboard) */
.tech-header-greeting .tech-greeting {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.tech-header-greeting .tech-greeting-date {
  font-size: var(--fs-xs);
  opacity: 0.7;
  text-transform: capitalize;
}

/* Avatar utilisateur (lien vers /tech/biometric) */
.tech-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background-color 0.15s ease;
}

.tech-avatar:hover { background: rgba(255, 255, 255, 0.28); }
.tech-avatar:active { transform: scale(0.96); }

/* -------------------------------------------------------------------------
   Hero card "Prochaine intervention" (M165=gamma, M167=beta)
   ------------------------------------------------------------------------- */
.tech-hero-card {
  position: relative;
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(40, 41, 125, 0.10);
  border-left: 5px solid var(--sora-blue);
}

/* Variations par statut (border-left + tint background) */
.tech-hero-en-cours {
  border-left-color: var(--sora-orange);
  background: linear-gradient(135deg, #fff8f4 0%, var(--white) 30%);
}

.tech-hero-planifie {
  border-left-color: var(--sora-blue);
}

.tech-hero-brouillon {
  border-left-color: var(--gray-400);
  background: var(--gray-50);
}

.tech-hero-bloque {
  border-left-color: var(--danger);
  background: linear-gradient(135deg, #fef2f2 0%, var(--white) 30%);
}

.tech-hero-termine {
  border-left-color: var(--success);
  opacity: 0.7;
}

.tech-hero-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gray-500);
  margin-bottom: var(--sp-2);
}

.tech-hero-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}

.tech-hero-time {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gray-700);
  font-variant-numeric: tabular-nums;
}

.tech-hero-place {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.tech-hero-precision {
  font-size: var(--fs-sm);
  color: var(--gray-700);
  margin-bottom: var(--sp-3);
  line-height: 1.4;
}

.tech-hero-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--gray-700);
  flex-wrap: wrap;
}

.tech-hero-support { font-weight: 500; }

/* Hero empty state */
.tech-hero-empty {
  border-left-color: var(--gray-300);
  text-align: center;
}

.tech-hero-empty-icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: var(--sp-2);
}

.tech-hero-empty-title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--sora-blue);
}

.tech-hero-empty-detail {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--gray-700);
  line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Pills statut intervention (hero + liste compacte)
   ------------------------------------------------------------------------- */
.tech-statut-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.tech-statut-encours   { background: var(--sora-orange); color: var(--white); }
.tech-statut-planifie  { background: var(--pa-blue);     color: var(--white); }
.tech-statut-brouillon { background: var(--gray-200);    color: var(--gray-700); }
.tech-statut-bloque    { background: var(--danger);      color: var(--white); }
.tech-statut-termine   { background: var(--success);     color: var(--white); }
.tech-statut-other     { background: var(--gray-300);    color: var(--gray-700); }

/* OT badge (mono) -- cohere admin.css .ot-badge */
.tech-ot-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--gray-700);
  letter-spacing: 0.3px;
}

.tech-ot-badge-sm {
  padding: 1px 6px;
  font-size: 11px;
}

/* M164=B "Sans N° OT" -- italic gray (cohere admin .ot-empty) */
.tech-ot-empty {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-style: italic;
  color: var(--gray-500);
}

/* -------------------------------------------------------------------------
   3 boutons d'actions rapides (M166=alpha)
   ------------------------------------------------------------------------- */
.tech-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.tech-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 88px;
  padding: var(--sp-3);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  color: var(--gray-900);
  text-decoration: none;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.05s ease, background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.tech-action-btn:hover { border-color: var(--sora-blue); background: var(--gray-50); }
.tech-action-btn:active { transform: scale(0.98); }

.tech-action-icon {
  font-size: 22px;
  line-height: 1;
  color: var(--sora-blue);
}

.tech-action-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  color: var(--gray-700);
}

.tech-action-primary {
  background: linear-gradient(135deg, var(--sora-orange) 0%, var(--sora-orange-dark) 100%);
  border-color: var(--sora-orange);
}

.tech-action-primary .tech-action-icon,
.tech-action-primary .tech-action-label {
  color: var(--white);
}

.tech-action-primary:hover {
  background: linear-gradient(135deg, var(--sora-orange-dark) 0%, #b03f1c 100%);
  border-color: var(--sora-orange-dark);
}

.tech-action-disabled {
  background: var(--gray-100);
  border-color: var(--gray-200);
  cursor: not-allowed;
  opacity: 0.5;
}

.tech-action-disabled .tech-action-icon,
.tech-action-disabled .tech-action-label {
  color: var(--gray-500);
}

.tech-action-disabled:hover {
  background: var(--gray-100);
  border-color: var(--gray-200);
}

/* -------------------------------------------------------------------------
   Liste compacte du reste de la journee (M167=beta)
   ------------------------------------------------------------------------- */
.tech-rest-section {
  margin-top: var(--sp-5);
}

.tech-rest-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.01em;
}

.tech-rest-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--sora-blue);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
}

.tech-rest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.tech-rest-item {
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  position: relative;
  overflow: hidden;
}

.tech-rest-item-past {
  opacity: 0.6;
  background: var(--gray-50);
}

.tech-rest-link {
  display: block;
  padding: var(--sp-3) var(--sp-8) var(--sp-3) var(--sp-4);
  color: var(--gray-900);
  text-decoration: none;
}

.tech-rest-link:active { background: var(--gray-100); }

.tech-rest-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.tech-rest-time {
  font-size: var(--fs-xs);
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}

.tech-rest-place {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 2px;
  line-height: 1.3;
}

.tech-rest-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--gray-600);
  flex-wrap: wrap;
}

.tech-rest-chevron {
  position: absolute;
  right: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-300);
  font-size: 22px;
  line-height: 1;
}

/* -------------------------------------------------------------------------
   13. Planning semaine (G4.3 ecran 1.3)
   ------------------------------------------------------------------------- */

/* Header gradient PA-blue cohere maquette */
.tech-planning-header {
  background: linear-gradient(135deg, var(--pa-blue) 0%, #141d40 100%);
  color: var(--white);
  padding: calc(var(--sp-3) + env(safe-area-inset-top)) var(--sp-4) var(--sp-5);
}

.tech-planning-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}

.tech-planning-back,
.tech-planning-today-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  min-height: 36px;
  transition: background-color 0.15s ease;
}

.tech-planning-back:hover,
.tech-planning-today-btn:hover { background: rgba(255, 255, 255, 0.28); }
.tech-planning-back:active,
.tech-planning-today-btn:active { transform: scale(0.97); }

.tech-planning-title {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.tech-planning-subtitle {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
}

.tech-planning-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}

.tech-planning-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: background-color 0.15s ease;
}

.tech-planning-nav-btn:hover { background: rgba(255, 255, 255, 0.28); }
.tech-planning-nav-btn:active { transform: scale(0.98); }

/* Main planning sans padding-top supplementaire (deja dans header) */
.tech-planning-main {
  padding-top: var(--sp-4);
}

/* Empty state planning */
.tech-planning-empty {
  text-align: center;
  padding: var(--sp-6) var(--sp-5);
}

.tech-planning-empty-icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: var(--sp-3);
}

.tech-planning-empty-title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--sora-blue);
}

.tech-planning-empty-detail {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--gray-700);
  line-height: 1.5;
}

/* Group par jour */
.tech-day-group {
  margin-bottom: var(--sp-5);
}

.tech-day-header {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 0 var(--sp-2);
  padding: var(--sp-2) var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--pa-blue);
  background: var(--gray-50);
}

.tech-day-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.tech-day-item {
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  overflow: hidden;
}

.tech-day-item-past {
  opacity: 0.55;
  background: var(--gray-50);
}

.tech-day-link {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  color: var(--gray-900);
  text-decoration: none;
}

.tech-day-link:active { background: var(--gray-100); }

.tech-day-row1 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.tech-day-time {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--gray-900);
  flex: 0 0 auto;
}

.tech-day-place {
  flex: 1 1 50%;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.3;
}

.tech-day-row2 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--gray-600);
  flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   14. Fiche chantier (G4.4 ecran 1.4)
   ------------------------------------------------------------------------- */

.tech-fiche-header {
  background: linear-gradient(135deg, var(--pa-blue) 0%, #141d40 100%);
  color: var(--white);
  padding: calc(var(--sp-3) + env(safe-area-inset-top)) var(--sp-4) var(--sp-5);
}

.tech-fiche-back {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  min-height: 36px;
  margin-bottom: var(--sp-3);
  transition: background-color 0.15s ease;
}

.tech-fiche-back:hover { background: rgba(255, 255, 255, 0.28); }
.tech-fiche-back:active { transform: scale(0.97); }

.tech-fiche-time-pill {
  display: inline-block;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--sp-3);
}

.tech-fiche-title {
  margin: 0 0 4px;
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.tech-fiche-subtitle {
  font-size: var(--fs-sm);
  opacity: 0.9;
  margin-bottom: 2px;
}

.tech-fiche-date {
  font-size: var(--fs-xs);
  opacity: 0.75;
  text-transform: capitalize;
  margin-bottom: var(--sp-3);
}

.tech-fiche-meta-pills {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.tech-fiche-meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.tech-fiche-meta-pill-empty {
  font-style: italic;
  opacity: 0.7;
}

.tech-fiche-main {
  padding-top: var(--sp-4);
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
}

.tech-fiche-section {
  margin-bottom: var(--sp-5);
}

.tech-fiche-section-title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gray-500);
}

.tech-fiche-section-hint {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--gray-500);
  line-height: 1.4;
}

/* Contact card */
.tech-contact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: #DBEAFE;
  border: 1px solid #93C5FD;
  border-radius: var(--radius-md);
}

.tech-contact-name {
  font-weight: 600;
  color: var(--gray-900);
  font-size: var(--fs-md);
}

.tech-contact-phone {
  font-size: var(--fs-sm);
  color: var(--gray-700);
  font-family: var(--font-mono);
}

.tech-btn-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: var(--sp-2) var(--sp-3);
  background: var(--success);
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.tech-btn-call:hover { background: #1f7a3b; }
.tech-btn-call:active { transform: scale(0.98); }

/* Notes card */
.tech-notes-card {
  padding: var(--sp-3) var(--sp-4);
  background: #FCE7F3;
  border: 1px solid #F9A8D4;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--gray-900);
}

/* Footer sticky 2 boutons */
.tech-fiche-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--white) 70%, rgba(255, 255, 255, 0));
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  z-index: 10;
}

.tech-fiche-btn-primary,
.tech-fiche-btn-secondary {
  width: 100%;
  text-align: center;
  text-decoration: none;
}

.tech-fiche-btn-secondary {
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
}

.tech-fiche-btn-secondary:hover { background: var(--gray-200); }

@media (min-width: 600px) {
  .tech-fiche-footer {
    grid-template-columns: 1fr 1fr;
  }
}

/* -------------------------------------------------------------------------
   15. Codes acces (G4.4 M194=beta zero-trust DOM)
   ------------------------------------------------------------------------- */

.tech-codes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.tech-code-item {
  padding: var(--sp-3) var(--sp-4);
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: var(--radius-md);
}

.tech-code-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}

.tech-code-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-600);
}

.tech-code-value {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--gray-900);
  word-break: break-all;
  letter-spacing: 0.5px;
}

.tech-code-value-masked {
  color: var(--gray-400);
}

.tech-code-value-revealed {
  color: var(--gray-900);
  user-select: all;
}

.tech-code-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.tech-code-actions .tech-btn-secondary {
  flex: 1;
  min-width: 90px;
  padding: var(--sp-2) var(--sp-3);
  min-height: 36px;
}

.tech-code-feedback {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  padding: 4px 8px;
  border-radius: 6px;
}

.tech-code-feedback-success {
  background: #d1fae5;
  color: #065f46;
}

.tech-code-feedback-error {
  background: #fef2f2;
  color: #991b1b;
}

.tech-code-feedback-info {
  background: var(--gray-100);
  color: var(--gray-700);
}

/* -------------------------------------------------------------------------
   16. Form motif chantier hors planning (G4.5 ecran 1.5)
   ------------------------------------------------------------------------- */

.tech-offp-header {
  background: linear-gradient(135deg, var(--pa-blue) 0%, #141d40 100%);
  color: var(--white);
  padding: calc(var(--sp-3) + env(safe-area-inset-top)) var(--sp-4) var(--sp-5);
}

.tech-offp-back {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  min-height: 36px;
  margin-bottom: var(--sp-3);
}

.tech-offp-back:hover { background: rgba(255, 255, 255, 0.28); }
.tech-offp-back:active { transform: scale(0.97); }

.tech-offp-title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.tech-offp-subtitle {
  margin: 0;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

.tech-offp-main {
  padding-top: var(--sp-4);
  padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
}

.tech-offp-form {
  display: block;
}

/* Fieldset categories radio cards */
.tech-offp-fieldset {
  border: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
}

.tech-offp-legend {
  display: block;
  padding: 0;
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gray-600);
}

.tech-offp-cards {
  display: grid;
  gap: var(--sp-2);
}

.tech-offp-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--gray-50);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  min-height: var(--touch-min);
  transition: background-color 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.tech-offp-card:has(.tech-offp-radio-input:checked),
.tech-offp-card-checked {
  background: rgba(31, 45, 90, 0.05);  /* pa-blue alpha 5% */
  border-color: var(--pa-blue);
}

.tech-offp-radio-input {
  /* Cache input natif visuellement, garde l'accessibilite */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tech-offp-radio-mark {
  display: inline-flex;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--gray-400);
  border-radius: 50%;
  position: relative;
  transition: border-color 0.15s ease;
}

.tech-offp-card:has(.tech-offp-radio-input:checked) .tech-offp-radio-mark,
.tech-offp-card-checked .tech-offp-radio-mark {
  border-color: var(--pa-blue);
}

.tech-offp-card:has(.tech-offp-radio-input:checked) .tech-offp-radio-mark::after,
.tech-offp-card-checked .tech-offp-radio-mark::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--pa-blue);
  border-radius: 50%;
}

.tech-offp-radio-input:focus-visible + .tech-offp-radio-mark {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

.tech-offp-card-icon {
  font-size: 22px;
  line-height: 1;
}

.tech-offp-card-label {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--gray-900);
  line-height: 1.3;
}

/* Textarea precisions */
.tech-offp-textarea-group {
  margin-bottom: var(--sp-5);
}

.tech-offp-textarea-label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gray-600);
}

.tech-offp-required {
  color: var(--danger);
  font-weight: 700;
}

.tech-offp-textarea {
  width: 100%;
  min-height: 100px;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-md);    /* 16px : evite zoom iOS focus */
  line-height: 1.4;
  color: var(--gray-900);
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.tech-offp-textarea:focus {
  outline: none;
  border-color: var(--sora-blue);
  box-shadow: 0 0 0 3px rgba(40, 41, 125, 0.15);
}

.tech-offp-textarea-hint {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--gray-500);
}

/* Footer 2 boutons */
.tech-offp-footer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.tech-offp-btn-submit {
  width: 100%;
}

.tech-offp-btn-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: var(--sp-3) var(--sp-5);
  background: transparent;
  color: var(--gray-700);
  border: none;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.tech-offp-btn-cancel:hover { color: var(--gray-900); }
.tech-offp-btn-cancel:active { transform: scale(0.98); }

@media (min-width: 768px) {
  .tech-offp-header {
    padding: calc(var(--sp-4) + env(safe-area-inset-top)) var(--sp-6) var(--sp-5);
  }
}

/* -------------------------------------------------------------------------
   17. Form interruption intervention (G4.6 ecran 1.6)
   ------------------------------------------------------------------------- */

.tech-interrupt-header {
  background: linear-gradient(135deg, var(--pa-blue) 0%, #141d40 100%);
  color: var(--white);
  padding: calc(var(--sp-3) + env(safe-area-inset-top)) var(--sp-4) var(--sp-5);
}

.tech-interrupt-back {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  min-height: 36px;
  margin-bottom: var(--sp-3);
}

.tech-interrupt-back:hover { background: rgba(255, 255, 255, 0.28); }
.tech-interrupt-back:active { transform: scale(0.97); }

.tech-interrupt-title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.tech-interrupt-subtitle {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

.tech-interrupt-context {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  padding-top: var(--sp-2);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.tech-interrupt-main {
  padding-top: var(--sp-4);
  padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
}

.tech-interrupt-form { display: block; }

/* Fieldsets */
.tech-interrupt-fieldset {
  border: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
}

.tech-interrupt-legend {
  display: block;
  padding: 0;
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gray-600);
}

/* 3 radio actions vertical (Reporter / Annuler / Bloquer) */
.tech-interrupt-actions {
  display: grid;
  gap: var(--sp-2);
}

.tech-interrupt-action {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--gray-50);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  min-height: var(--touch-min);
  transition: background-color 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.tech-interrupt-action:has(.tech-interrupt-radio-input:checked),
.tech-interrupt-action-checked {
  background: rgba(31, 45, 90, 0.05);
  border-color: var(--pa-blue);
}

.tech-interrupt-radio-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tech-interrupt-radio-mark {
  display: inline-flex;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid var(--gray-400);
  border-radius: 50%;
  position: relative;
  transition: border-color 0.15s ease;
}

.tech-interrupt-action:has(.tech-interrupt-radio-input:checked) .tech-interrupt-radio-mark,
.tech-interrupt-action-checked .tech-interrupt-radio-mark {
  border-color: var(--pa-blue);
}

.tech-interrupt-action:has(.tech-interrupt-radio-input:checked) .tech-interrupt-radio-mark::after,
.tech-interrupt-action-checked .tech-interrupt-radio-mark::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--pa-blue);
  border-radius: 50%;
}

.tech-interrupt-radio-input:focus-visible + .tech-interrupt-radio-mark {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

.tech-interrupt-action-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.tech-interrupt-action-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gray-900);
}

.tech-interrupt-action-detail {
  font-size: var(--fs-xs);
  color: var(--gray-500);
}

/* 4 causes checkboxes grid 1fr 1fr */
.tech-interrupt-causes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}

.tech-interrupt-cause {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--gray-50);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  min-height: var(--touch-min);
  transition: background-color 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  font-size: var(--fs-sm);
}

.tech-interrupt-cause:has(.tech-interrupt-cause-input:checked),
.tech-interrupt-cause-checked {
  background: rgba(232, 93, 44, 0.08);   /* sora-orange alpha 8% */
  border-color: var(--sora-orange);
}

.tech-interrupt-cause-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tech-interrupt-cause-mark {
  display: inline-flex;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 2px solid var(--gray-400);
  border-radius: 4px;
  position: relative;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tech-interrupt-cause:has(.tech-interrupt-cause-input:checked) .tech-interrupt-cause-mark,
.tech-interrupt-cause-checked .tech-interrupt-cause-mark {
  border-color: var(--sora-orange);
  background: var(--sora-orange);
}

.tech-interrupt-cause:has(.tech-interrupt-cause-input:checked) .tech-interrupt-cause-mark::after,
.tech-interrupt-cause-checked .tech-interrupt-cause-mark::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.tech-interrupt-cause-input:focus-visible + .tech-interrupt-cause-mark {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

.tech-interrupt-cause-label {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--gray-900);
  line-height: 1.3;
}

/* Textarea precisions */
.tech-interrupt-textarea-group {
  margin-bottom: var(--sp-5);
}

.tech-interrupt-textarea-label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gray-600);
}

.tech-interrupt-required {
  color: var(--danger);
  font-weight: 700;
}

.tech-interrupt-textarea {
  width: 100%;
  min-height: 100px;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--gray-900);
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.tech-interrupt-textarea:focus {
  outline: none;
  border-color: var(--sora-blue);
  box-shadow: 0 0 0 3px rgba(40, 41, 125, 0.15);
}

.tech-interrupt-textarea-hint {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--gray-500);
}

/* Footer 2 boutons */
.tech-interrupt-footer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.tech-interrupt-btn-submit {
  width: 100%;
}

.tech-interrupt-btn-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: var(--sp-3) var(--sp-5);
  background: transparent;
  color: var(--gray-700);
  border: none;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.tech-interrupt-btn-cancel:hover { color: var(--gray-900); }
.tech-interrupt-btn-cancel:active { transform: scale(0.98); }

@media (min-width: 768px) {
  .tech-interrupt-header {
    padding: calc(var(--sp-4) + env(safe-area-inset-top)) var(--sp-6) var(--sp-5);
  }
}

/* -------------------------------------------------------------------------
   18. Rapport intervention cascade saisie (G4.7 ecrans 1.7+1.8)
   ------------------------------------------------------------------------- */

.tech-rapport-header {
  background: linear-gradient(135deg, var(--pa-blue) 0%, #141d40 100%);
  color: var(--white);
  padding: calc(var(--sp-3) + env(safe-area-inset-top)) var(--sp-4) var(--sp-5);
}

.tech-rapport-back {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  min-height: 36px;
  margin-bottom: var(--sp-3);
}

.tech-rapport-back:hover { background: rgba(255, 255, 255, 0.28); }

.tech-rapport-title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xl);
  font-weight: 700;
}

.tech-rapport-subtitle {
  margin: 0;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

.tech-rapport-statut-brouillon { color: var(--warning); font-weight: 700; }
.tech-rapport-statut-envoye { color: #4ade80; font-weight: 700; }

.tech-rapport-main {
  padding-top: var(--sp-4);
  padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
}

.tech-rapport-section {
  margin-bottom: var(--sp-5);
  padding: var(--sp-4);
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
}

.tech-rapport-section-title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tech-photo-counter {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--gray-500);
  background: var(--gray-100);
  padding: 2px 8px;
  border-radius: 10px;
}

.tech-rapport-section-hint {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--gray-500);
  line-height: 1.4;
}

.tech-rapport-info-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0;
  font-size: var(--fs-sm);
}

.tech-rapport-info-grid dt {
  color: var(--gray-500);
  font-weight: 600;
}

.tech-rapport-info-grid dd {
  margin: 0;
  color: var(--gray-900);
}

.tech-rapport-prefilled {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) var(--sp-3);
  background: rgba(232, 93, 44, 0.08);
  border-left: 3px solid var(--sora-orange);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  color: var(--gray-700);
}

/* Photos lists */
.tech-photos-list {
  list-style: none;
  margin: 0 0 var(--sp-3);
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.tech-photo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}

.tech-photo-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-xs);
}

.tech-photo-size { color: var(--gray-700); font-weight: 600; }
.tech-photo-geo { color: var(--gray-500); }

.tech-photo-delete {
  background: transparent;
  color: var(--danger);
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
  padding: 4px 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  min-height: 32px;
}

.tech-photo-delete:hover { background: #fef2f2; }

.tech-photo-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: var(--sp-3);
  background: linear-gradient(135deg, var(--sora-orange) 0%, var(--sora-orange-dark) 100%);
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.tech-photo-upload-btn:hover { opacity: 0.9; }

.tech-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Commentaire */
.tech-rapport-textarea {
  width: 100%;
  min-height: 100px;
  padding: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--gray-900);
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  resize: vertical;
}

.tech-rapport-textarea:focus {
  outline: none;
  border-color: var(--sora-blue);
  box-shadow: 0 0 0 3px rgba(40, 41, 125, 0.15);
}

.tech-rapport-readonly {
  padding: var(--sp-3);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--gray-700);
  white-space: pre-wrap;
}

/* Actions footer */
.tech-rapport-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.tech-rapport-btn-submit {
  width: 100%;
  font-size: var(--fs-md);
}

.tech-rapport-btn-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tech-rapport-btn-draft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: var(--sp-3) var(--sp-5);
  background: transparent;
  color: var(--gray-700);
  border: none;
  font-size: var(--fs-sm);
  text-decoration: none;
  text-align: center;
}

.tech-rapport-btn-draft:hover { color: var(--gray-900); }

.tech-rapport-envoye-banner {
  padding: var(--sp-3);
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  border-radius: var(--radius-md);
  color: #065f46;
  font-weight: 600;
  text-align: center;
  margin-bottom: var(--sp-2);
}

/* -------------------------------------------------------------------------
   19. Tablet+ (>= 768px) -- ancienne section renumerotee
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .tech-auth-card {
    padding: var(--sp-8) var(--sp-6) var(--sp-6);
  }

  .tech-header {
    padding: var(--sp-4) var(--sp-6);
    padding-top: calc(var(--sp-4) + env(safe-area-inset-top));
  }

  .tech-main {
    padding: var(--sp-6);
  }

  .tech-actions-row {
    gap: var(--sp-3);
  }

  .tech-action-btn {
    min-height: 96px;
  }

  .tech-planning-header {
    padding: calc(var(--sp-4) + env(safe-area-inset-top)) var(--sp-6) var(--sp-5);
  }
}